W tym filmie mamy zamiar przejść na rozwiązanie problemu selektorów CSSA ustawić.
A ja po prostu pójdzie na każdy problem z góry na dół.
Dlatego zachęcamy do przodu, jeśli istnieje tylko jeden lub dwa, które miały problemy z.
Więc zrobiliśmy pierwszy razem w początkowej wideo dają element body tło tego koloru.
Więc po prostu powiedzieć, ciało tło jest ten kolor z wyjątkiem nas.
Idziemy do przodu i załadować go w odświeżeniu przeglądarki i widać mamy szarym tle.
Więc następny to zrobić, że H Jednym z elementów tego koloru.
Tak samo z wyjątkiem zamiast tle po prostu powiedział kolorze.
Oszczędzamy tkwi ani H-1 okaże fioletowy.
Pamiętaj, że jeśli mieliśmy więcej niż jeden H-1 na stronie będą one wszystkie być fioletowy.
Więc to następna jest uczynić wszystko H-2 pozycje na pomarańczowo.
Tak dokładnie to samo jako selektor powyżej dwóch.
A potem, aby to pomarańczowy jestem po prostu zamiar użyć wbudowanego w kolorze pomarańczowym, ale można użyć dowolnego innego systemu kolorów i widać mamy każdym wieku do tych czterech z nich.
Oni z kolei na pomarańczowo.
Więc następnym aż będziemy przesuwać tego na bok, aby wszystkie elementy sojusznik niebiesko.
Odbiór własnym niebieski szesnastkowym.
Więc to zrobić wybieramy wszystkie sojuszników, a potem nadać im kolor i zamierzamy zrobić szesnastkowy niebieski.
Więc można umieścić cokolwiek tutaj tak długo, jak to jest bardziej niebieskie niż cokolwiek innego.
Więc pamiętaj pierwszy kanał jest czerwony, a następnie dwa kolejne są zielone.
Więc zrobimy trochę zielony zróbmy a potem banda niebieskich.
Zapamiętaj to i rzućmy okiem na aliantów i widać mamy niebieskie światła.
Więc teraz zmienić tło na każdym akapicie być żółty.
To tylko jeden, gdzie wybrać każdy element typu.
Więc wszystko paragrafy tło żółty zapisać i mamy kilka żółtych punktach.
Następna w kolejce wybrać wszystkie wejścia i dać im czerwone obramowanie trzech pikseli.
Więc wejście granicznej i jest kilka sposobów na zrobienie tego, co możemy zrobić to wszystko naraz.
Zamów trzy piksel świeci na czerwono i można zobaczyć nasze dwa wejścia mają przedrostek lub masywne czerwone obramowanie albo możemy to zrobić oddzielnie granicy kolor czerwony granicy z ma trzy piksele i wreszcie styl obramowania jest stały dla dość oczywistych powodów.
Jest to o wiele łatwiejsze, aby to zrobić.
Ale od czasu do czasu będziemy chcieli to zrobić, kiedy dojdziesz do javascript.
Będziemy chcesz po prostu zaktualizować jedną część.
Tak więc, gdy użytkownik znajdzie się nad czymś chcesz zmienić go z czerwonym obramowaniem z zieloną granicę.
Więc może po prostu chcesz zmienić kolor i możemy opuścić zw stylu jak są.
Więc mam zamiar zostawić go w takim stanie.
Dalej mamy teraz ruszać na selektora klasy.
Więc dać wszystko z klasą cześć.
Białe tło.
A jeśli spojrzymy na h t m l istnieje właściwie tylko jedno.
Ten pierwszy akapit wewnątrz div z klasą.
Cześć.
Więc wybrać tej klasy kropkę.
Witam białym tle.
I widać mamy tutaj ten akapit.
Okazuje bieli.
Następna w kolejce dać element z ID specjalnym stałym niebieskim obramowaniem dwóch pikseli.
Odbiór własnym R. G. być niebieski.
Tak samo ponownie tym razem zamiast kropki używamy znaku hash lub łuku Thorpe, a następnie, że nazwa ID widzi znowu jest tutaj Id especial.
A potem chcemy dać mu solidną granicy dwóch pixel pixel tak solidne, a następnie R. G. być niebieski.
I tak będzie musiał 0 czerwony 100 200 zielony niebieski i jeśli są świeże, że można zobaczyć dostajemy to dość niewielkie, lecz niebieskie obramowanie wokół piksela 2 niniejszego paragrafu z ID.
Następna w kolejce, aby wszystkie akapity, które są zagnieżdżone wewnątrz DIV czcionki 25 pikseli, a wskazówka jest używać tej czcionki Powierzchnia Dasch 25 pikseli.
Więc co trzeba zrobić to tutaj, zamiast wybrać wszystkie paragrafy Chcemy tylko akapity, które są wewnątrz div, dzięki czemu można zobaczyć, są tacy, jak ten tutaj to nie jest wewnątrz div.
Nie chcemy być tymi 25 pikseli na rozmiar czcionki.
Więc używamy tego selektor potomków którym mówimy div, a następnie wewnątrz tego div wszystkie akapity tak ustępów, które żyją w każdym div nie ma znaczenia, który dział byle akapity w dowolnych DIV będzie je wybrać i dać im rozmiar czcionki 25 pikseli zapisać, że odświeżanie i widać, że wszystkie te stają się coraz większe, ale te z nich, które mówią, paragraf nie wewnątrz div nie coraz większy, ponieważ nie są one zamiast div Następna w kolejce, aby wejść tylko z typu text mają szare tło.
Więc to jest inny rodzaj selektora i jest oparty off atrybutu.
Więc atrybut chcesz zrobić, to dowiedzieć się, gdzie typ jest równa tekstu.
Więc w zasadzie tylko to wejście tutaj typ równa tekst.
I tak droga, że ​​to zrobimy będziemy wprowadzać dane wejściowe, a następnie kwadratowe nawiasy kwadratowe nawiasy i Tak.
A potem wewnątrz istnieje atrybut, który jest rodzaj i szukamy gdzie jest równa do tekstu, a potem po prostu powiedzieć szarym tle.
A potem, jeśli mamy przejść tutaj i odświeżyć trzymać oko tu widać mamy szarym tle.
Więc znowu ta jest przydatna, jeśli chcesz, aby zaznaczyć wszystkie linki, które udał się do Google.
Chcielibyśmy wybierz oparty off H.F. albo możemy wybrać się jakiegokolwiek innego atrybutu tam.
Więc następnym się dać Obie litery wewnątrz trzeciego div różowym tle.
Więc to dostaje trochę szalony.
Więc rzućmy okiem na HMO.
Oto nasz trzeci dz ..
Pierwszy z nich jest tutaj.
Drugim z nich jest tutaj, a trzeci jest tu i tam dwa akapity i chcemy wybrać oboje i dać im różowym tle.
Więc to, co przedtem było wybrać wszystkie paragrafy wewnątrz wszystkich div, że nie będzie tu pracują.
Co robimy, co chcemy zrobić, to wybrać wszystkie paragrafy wewnątrz trzeciego div na stronie.
I w ten sposób możemy określić trzeci div jest użycie końcówkę typu.
Więc mówimy div i typu 3.
Tak, że będzie nam trzeci div, a następnie zamiast tego wszystkich akapitów, a potem po prostu powiedzieć Tło jest różowe i zapisać odświeżania i niech to dokładnie sprawdzić.
Oto nasz pierwszy div.
Oto drugi div.
A oto trzeci div.
Zacznij ust zacząć sweter i jestem drugi akapit.
Nie idziemy kardigan.
Jestem drugi akapit.
Następna w kolejce dać ten akapit drugi wewnątrz trzeciego div białą obwódkę pięć pikseli granicznej.
Więc ten jest bardzo podobny, z tym chcemy jedynie drugi paragraf wewnątrz trzeciego div.
Tak więc tylko ten jeden.
Więc robimy to samo gdzie wybrać trzecią div i typu 3, a następnie zamiast wszystkie paragrafy my wtedy zrobimy ustępu i typu.
I chcemy drugi, dzięki czemu możemy je połączyć.
To będzie wybrać drugi paragraf zamiast trzeciego div i chcemy mu dać 5 pikseli biały border border 5 pikseli świeci na biało.
No to jedziemy.
Oto nasz pięć pikseli stałe białe obramowanie na drugim akapicie w div.
Nie pierwszy.
Następna w kolejce dokonać e-M w trzecim elemencie div białym i 20 czcionek piksela.
Tak, że to jest e-M tu cronut deskorolka.
Jeśli nie wiesz Krown jest to bardzo smaczne.
Może przereklamowany.
Zdecydowanie zawyżona ciasto z Nowego Jorku.
Ma pączka i rogalika.
Więc na pewno w domu zamiast ipsum słownictwa hipster tutaj.
I mamy zamiar podjąć, że e-M i zamierzamy zrobić to biały i 20 pikseli Swan.
Więc tak jak wcześniej musieliśmy wybrać trzecią div 3, a następnie po prostu e-M w środku.
A to spowoduje zaznaczenie wszystkich iems i po prostu zdarza się, że jest tylko jeden.
Ale jeśli było ich więcej niż jeden może chcemy powiedzieć, e-M przede typu lub e-M zamiast ust, ale ja po prostu zostawić je tak, to na razie.
I chcemy nadać jej białego do koloru i 20 pikseli koloru czcionki białego i rozmiaru czcionki 20 pikseli.
I tylko przypomnieć, będziemy tracić czasu na mówienie o czcionki i rozmiaru czcionki oraz kilka innych rzeczy w kolejnych filmach.
No to jedziemy.
Jest biały i zmiany rozmiaru czcionki.
Więc teraz jesteśmy na niektórych ćwiczeniach bonusowych, które są jedne z moich ulubionych.
Są to jedne z bardziej niejasnych ciekawszych sposobów wybierając rzeczy i manipulowania nimi.
Tak, aby rozpocząć.
Spójrzmy na co wszystkie zaznaczone pola wyboru mają lewy margines 50 pikseli i dałem go do ciebie.
Trzeba użyć margines pozostawiony na 50 pikseli.
Więc nie ma selektor, aby wybrać elementy, które są zaznaczone.
I to właśnie wygląda.
To selektor pseudo jak nth typu.
Więc trzeba powiedzieć, czego szukasz, co zostało zaznaczone.
Więc ja po prostu powiedzieć, że wszystkie wejścia zostały sprawdzone, gdyż należy pamiętać, że pola wyboru są równe pole input type istnieją inne elementy, które mogą być sprawdzone, choć głównie przycisku radiowego.
Więc byłoby to również wybrać żadnych przycisków radiowych, które zostały sprawdzone i to jest w porządku teraz.
Wygląda więc na to sprawdził tę okrężnicy wejściowego.
A to, co chcemy zrobić, to margines Użyj lewej pięćdziesiąt pikseli.
Więc to jest trochę podgląd tego, co jesteśmy wymyślanie na niektórych kolejnych filmach, gdy dodamy do tego i to będzie dodać trochę miejsca na lewej stronie pola wyboru, więc można zobaczyć te, które są zaznaczone przeniesione.
Teraz, jeśli mogę sprawdzić ten jeden teraz to jest sprawdzane i porusza się na prawo 50 pikseli.
Gdybym je odznaczyć i przenieść z powrotem na lewo.
Więc to jest zaznaczone.
Następny.
Jest to prawdopodobnie mój ulubiony.
Bądź elementy etykiety wielkimi literami bez zmiany HMO.
Więc wspomniano na pewno będziesz chciał patrzeć, że jeden i to dlatego, że na pewno nie poszły nad tym.
Więc zacząć niech po prostu zaznaczyć wszystkie elementy etykiety i powiedzmy, że nie wiem, jak je wielkimi literami bez zmiany HMO.
Warto więc podciągnąć Google i nie szukaj, a to jest coś, co na pewno przedtem.
Więc chodźmy się i nie szukaj zobacz oceny górną obudowę można zobaczyć pierwszą rzeczą, która wyskakuje jest przekształcenie tekstu i tekst transformacji mówi, że to określa sposób, aby wykorzystać w tekście elementy.
Może być używany do tekstu pojawiają się we wszystkich wielkich liter lub wszystkimi małymi literami lub z każdym słowem kapitalizowane.
Tak więc możemy przewijać w dół i przyjrzeć się składni i wygląda na to mamy wykorzystać.
Woli kapitalisty pisany wielką literą i małych liter.
Dlatego chcemy, wielkimi literami.
Więc tekst przekształcić wielkimi literami.
A to, co właśnie zrobił nie było po prostu ci coś pokazać to faktycznie coś, co robię cały czas, który szuka rzeczy się dzieje w Google, wpisując C Ss bla bla bla CSSA wielkie litery C S przejrzyste co szukam zrobić.
I wystarczy spojrzeć na wyniki wyszukiwania, ponieważ istnieje tak wiele właściwości przypomnieć.
Nie pamiętam wszystkich z nich.
Więc jest to jeden z bardziej niejasnych nich.
Zdecydowanie.
A jeśli to jest dla odświeżenia etykiety, które są tutaj.
Więc niech mi tylko pozbyć się tego po prostu pokazać wam nasz czas.
Są to etykiety.
A potem dodać to i odświeżyć ich górnej obudowie.
Więc następnym się musimy zrobić pierwszy list elementu z ID specjalnym zielonym i 100 pikseli, rozmiar czcionki.
Więc kierować pierwszą literę, że jest jeszcze jeden, że możemy chcieć patrzeć SEUS nam pierwszą literę i zobacz, co mamy.
Wygląda więc na to, że jest inny selektor pseudo.
Pierwsza litera C Ss elementem wybiera pierwszą literę w pierwszym wierszu bloku.
Więc jeśli wziąć wyglądać przykładowy pierwszy list.
Idziemy do przodu i spróbować.
Chcemy najpierw wybrać specjalnego identyfikatora, a następnie pierwszą literę tego.
I chcemy, aby to zielony i 100 pikseli na rozmiar czcionki tak kolorze zielonym i rozmiaru czcionki 100 pikseli zapisać i ten element jest tutaj.
Więc miej oko na pierwszą literę możemy odświeżyć i dostajemy to gigantyczne zielone oko.
Następny jeden kolor sprawiają, że H-1 elementy zmienione na niebiesko, gdy unosił się nad.
Więc ten jeden jest w rzeczywistości dość powszechne, aby mieć jakiś efekt.
Po najechaniu na czymś zwykle dość subtelna może na przycisk, a po najechaniu na niego i jest tam mały cień, który wydaje się, że zmiany koloru bardzo nieznacznie wyglądać znasz jakieś 3-D perspektywy coś się daje tylko trochę nieco interaktywności bez rozpraszania się rozpraszać.
Więc mamy zamiar wybrać H-1 I to właściwie wszystko jest każdy.
Ale w tym przypadku jest to tylko jeden i selektor pseudo jest aktywowanych i cokolwiek kładziemy tu jest stosowana tylko wtedy, gdy użytkownik znajdzie się nad elementem.
Tak więc kolor niebieski możemy zaoszczędzić.
Oto nasz H-1.
A gdybym najechaniu zmienia kolor na niebieski, gdy przestanie unosić wraca do tego, co przedtem.
Więc w końcu wprowadzić elementy, które zostały odwiedzone szary i jak widzi te dwa elementy te dwa linki Właściwie oba linki do Facebook, które są linki, które w których byłem wcześniej.
To dlatego, że są fioletowe Chrome domyślnie uczyni wszystko odwiedził myśli fioletowy.
Warto więc umieścić link, który na pewno nie zostały przedtem i to właśnie zamiar zrobić coś, aby rozpocząć i pokażę Ci odświeżyć stronę.
Teraz niebiesko.
Ponieważ nie byłem tam.
Więc zostawmy go w ten sposób na razie nie zamierzam go kliknąć.
I chcemy, by odwiedzili te być fioletowy zamiast.
Przepraszam chcemy odwiedził kiedyś się szara, a nie fioletowy.
Więc wybrać tagów selektory pseudo nazwie odwiedzanych a potem mamy zamiar zrobić to szara uratować.
A jeśli odświeżyć.
Miej oko na ten jeden tutaj.
Zrobię czcionka trochę większy.
To obecnie fioletowy, ponieważ byłem tam przed odświeżyć.
Teraz to jest wielka.
OK więc nadzieję, że cieszył się, że ćwiczenia.
Jest dużo się tam rozpakować.
Wiele różnych selektorów.
I jedno dodam, że dla każdego rozwiązania, które mam lub prawie każdy jeden jest co najmniej jeden lub dwa więcej sposobów osiągnięcia dokładnie ten sam wynik.
Więc jeśli miał coś, co różni się od mnie, ale nadal pracował, to świetnie.
Zapraszam do dodawania w komentarzach.
Podziel się z innymi ludźmi.
Jest to całkowicie poprawne.
To jest po prostu tak, że bym to zrobił.
Jeszcze jedno.
Oczywiście strona nie jest szczególnie atrakcyjne.
To nie jest prawdziwe miejsce.
Będziemy pracować na rzeczywistym projekcie bardzo szybko w następnym ćwiczeniu wideo.
Jesteśmy rzeczywiście zamiar zrobić trochę witryny blogu, że jest trochę lepiej zaprojektowane.
To wygląda o wiele ładniejszy niż ten.
Jest to bardziej tylko ćwiczenia praktyką.