: paskutinis vaikas - CSS-gudrybės

Anonim

Pasirinkiklis :last-childleidžia nukreipti paskutinį elementą tiesiai į jo elementą. CSS selektorių 3 lygio specifikacijoje jis apibrėžiamas kaip „struktūrinė pseudoklasė“, tai reiškia, kad jis naudojamas kuriant turinį pagal jo santykį su tėvų ir brolių turiniu.

Tarkime, kad turime straipsnį ir norime padaryti paskutinę pastraipą mažesnę, kad tai būtų turinio išvada (pvz., Redaktoriaus pastaba):


Lorem ipsum…

Dolor sit amet…

Consectetur adipisicing…

Last paragraph…

Užuot naudoję klasę (pvz. .last), Galime ją :last-childpasirinkti:

p:last-child ( font-size: 0.75em; )

Naudojimas :last-childyra labai panašus į, :last-of-typebet su vienu kritiniu skirtumu: jis yra mažiau specifinis. :last-childbandys atitikti tik patį paskutinį pirminio elemento antrinį elementą, o last-of-typepaskutinį nurodyto elemento atvejį, net jei jis nebus paskutinis HTML. Aukščiau pateiktame pavyzdyje rezultatas būtų tas pats, tik todėl, kad paskutinis vaikas articletaip pat yra paskutinis pelementas. Tai atskleidžia galybę :last-child: jis gali nustatyti elementą, susijusį su visais savo broliais ir seserimis, ne tik su to paties tipo broliais.

Išsamesnis toliau pateiktas pavyzdys parodo, kaip naudojamas :last-childir susijęs pseudo klasės selektorius :first-child.

Patikrinkite šį rašiklį!

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks 3.2+ Bet koks 9,5+ 9+ Bet koks Bet koks

:last-childbuvo pristatytas CSS selektorių 3 modulyje, o tai reiškia, kad senos naršyklių versijos jo nepalaiko. Tačiau šiuolaikinis naršyklės palaikymas yra nepriekaištingas, o naujieji pseudo selektoriai yra plačiai naudojami gamybos aplinkose. Jei jums reikia senesnės naršyklės palaikymo, naudokite IE polifillą arba naudokite šiuos pasirinkiklius nekritiniais būdais, palaipsniui tobulindami, o tai rekomenduojama.