Spojrzenie w selektor strukturalny CSS3
Jedną z rzeczy, które uwielbiam w CSS3, jest nowy dodatek selektorów, które pozwalają nam celować w elementy bez polegania na klasa, ID lub inny atrybut elementu, a jeden, który omówimy tutaj, to następujący selektor, : pierwszy w swoim rodzaju.
The : pierwszy w swoim rodzaju selektor będzie kierował do pierwszego dziecka określonego elementu, na przykład fragment poniżej będzie kierowany do pierwszego h2 na stronie internetowej.
h2: pierwsza deklaracja stylu / * * /
The : pierwszy w swoim rodzaju jest również równy : nth-of-type (1), zamiast wybierać tylko pierwszy tego typu możemy dalej wybrać drugi, trzeci i tak dalej. Poniższy fragment będzie wskazywał drugi h2 element na stronie internetowej.
h2: nth-of-type (2) deklaracja stylu / * * /
: pierwszy w swoim rodzaju” vs. “:pierworodny”
Może się wydawać, że te dwa selektory robią to samo, ale tak nie jest. Zobaczmy następującą demonstrację:
Powiedzmy, że mamy pięć elementów akapitu owiniętych w div, lubię to:
Ustęp 1
Ustęp 2
Ustęp 3
Ustęp 4
Ustęp 5
Teraz chcielibyśmy wybrać pierwszy akapit za pomocą :pierworodny selektor.
p: first-child padding: 5px 10px; border-radius: 2px; tło: # 8960a7; kolor: #fff; granica: 1px bryła # 5b456a;
I jak przewidywaliśmy, pierwszy akapit został pomyślnie wybrany.
- : Demo pierwszego dziecka
Jednak kiedy my dodaj inny element wcześniej pierwszy akapit, powiedzmy h1, jak poniżej:
Nagłówek 1
Ustęp 1
Ustęp 2
Ustęp 3
Ustęp 4
Ustęp 5
pierwszy akapit nie zostanie wybrany, jako pierwsze dziecko w div jest już nie akapit, ale jest teraz h1.
Tak jest w sytuacji, gdy : pierwszy w swoim rodzaju selektor pojawia się, aby rozwiązać problem.
p: first-of-type padding: 5px 10px; border-radius: 2px; tło: # a8b700; kolor: #fff; granica: 1px bryła # 597500;
- : Demo pierwszego typu
The “Ostatni, ubiegły, zeszły” Selektor
Gdzie jest “pierwszy”, wtedy będzie też “ostatni, ubiegły, zeszły”.
Odwrotność dwóch selektorów, które omówiliśmy powyżej, to dwa następujące selektory; :ostatnie dziecko i : last-of-type. Zasadniczo są one takie same jak powyżej, z wyjątkiem tego, że celują w ostatnie dziecko określonego elementu.
Na przykład poniższy urywek będzie kierować na ostatni akapit wewnątrz div.
p: last-child padding: 5px 10px; border-radius: 2px; tło: # 8960a7; kolor: #fff; granica: 1px bryła # 5b456a;
- : Demo ostatniego dziecka
Ten fragment będzie także dotyczył ostatniego akapitu w takiej samej sytuacji, jak omówiliśmy powyżej; tym razem następuje bezpośrednio inny element.
p: last-of-type padding: 5px 10px; border-radius: 2px; tło: # a8b700; kolor: #fff; granica: 1px bryła # 597500;
- : ostatnie demo typu
Selectivizr
Jak każda nowa funkcja w CSS3, selektory te nie są obsługiwane głównie w starych przeglądarkach Internet Explorer 6 do 8, z wyjątkiem dla :pierworodny selektor, ponieważ został dodany od czasu CSS2.1. Jego względne :ostatnie dziecko został dodany tylko w CSS3.
Jeśli więc wszystkie te selektory, o których tutaj wspomnieliśmy, są naprawdę wymagane dla twojej witryny, możesz użyć biblioteki JavaScript o nazwie Selectivizr emulować funkcjonalność selektora CSS3.
Aby działać, Selectivizr jest zależny od innych bibliotek JavaScript, takich jak jQuery, Dojo, Prototype i MooTools; i widząc z tabeli porównawczej na oficjalnej stronie internetowej, MooTools wydaje się być w stanie obsłużyć wszystkie selektory.
Dołączmy to razem z Selectivizrem w następujący sposób:
Powyższy komentarz warunkowy zapewni, że te biblioteki będą ładowane tylko w przeglądarce Internet Explorer 8 i poniżej.
Na koniec możesz zobaczyć wersję demonstracyjną z poniższych linków, która powinna teraz działać zarówno w nowoczesnych, jak i starych przeglądarkach (IE8 i poniżej). Możesz również pobrać plik źródłowy do dalszego badania. Cieszyć się.
- Próbny
- Pobierz źródło
