: pirmasis vaikas - CSS-gudrybės

Anonim

Pasirinkiklis :first-childleidžia nukreipti pirmą elementą iškart į kito elemento vidų. 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 mes turime straipsnį ir norime padaryti didesnę pirmąją pastraipą, pavyzdžiui, „ledą“ ar įvadinio teksto dalį:


First paragraph…

Lorem ipsum…

Dolor sit amet…

Consectetur adipisicing…

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

p:first-child ( font-size: 1.5em; )

Naudojimas :first-childyra labai panašus į, :first-of-typebet su vienu kritiniu skirtumu: jis yra mažiau specifinis. :first-childbandys suderinti tik su pirmuoju pirminio elemento antriniu elementu, o first-of-typepagal pirmą nurodyto elemento atvejį, net jei jis nėra absoliučiai pirmas HTML. Aukščiau pateiktame pavyzdyje rezultatas būtų tas pats, tik todėl, kad pirmasis vaikas articletaip pat yra pirmasis pelementas. Tai atskleidžia galybę :first-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 :first-childir susijęs pseudo klasės selektorius :last-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

:first-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.