: pēdējais bērns - CSS-triki

Anonim

:last-childSelektors ļauj mērķēt pēdējo elementu tieši iekšpusē tā satur elementu. CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to lieto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu saturu.

Pieņemsim, ka mums ir raksts un mēs vēlamies padarīt pēdējo rindkopu mazāku, lai darbotos kā satura secinājums (piemēram, redaktora piezīme):


Lorem ipsum…

Dolor sit amet…

Consectetur adipisicing…

Last paragraph…

Tā vietā, lai izmantotu klasi (piemēram, .last), mēs varam to izmantot :last-child:

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

Lietošana :last-childir ļoti līdzīga, :last-of-typebet ar vienu kritisku atšķirību: tā ir mazāk specifiska. :last-childmēģinās pieskaņot tikai pašu vecāku elementa pēdējo pakārtoto pakāpi, savukārt last-of-typepēdējais norādītā elementa gadījums, pat ja HTML kodā tas nebūs pēdējais. Iepriekš minētajā piemērā iznākums būtu vienāds tikai tāpēc, ka arī pēdējais bērns articleir pēdējais pelements. Tas atklāj spēku :last-child: tas var identificēt elementu saistībā ar visiem tā brāļiem un māsām, ne tikai ar tāda paša veida brāļiem un māsām.

Tālāk sniegtajā pilnīgākajā piemērā parādīts :last-childpseidoklases selektora un ar to saistītā selektora lietojums :first-child.

Pārbaudiet šo pildspalvu!

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jebkurš 3.2+ Jebkurš 9,5+ 9+ Jebkurš Jebkurš

:last-childtika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.