Palikuonis - CSS-gudrybės

Anonim

CSS palikuonis yra bet koks selektorius, kurio tarpas tarp dviejų selektorių yra be tarpo. Štai keletas pavyzdžių:

ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )

Paimkime ul li ( ), pavyzdžiui. Tai reiškia „bet kurį sąrašo elementą, kuris yra nesutvarkyto sąrašo palikuonis“.

Palikuonis reiškia bet kurią DOM medyje esančią vietą. Gali būti tiesioginis vaikas, gali būti penkių lygių gylis, jis vis dar yra palikuonis. Tai skiriasi nuo vaikų kombinatoriaus (>), kuris reikalauja, kad elementas būtų kitame įdėtame lygyje žemyn.

Norėdami iliustruoti, div span ( )atitiks:

 I will match
  • I will match too

Tikriausiai neturėtumėte dėl to labai jaudintis, tačiau apgaulingas selektorius yra gana „brangus“ - tai reiškia, kad sunku / lėtai perteikti variklius, kad jie suprastų ir atliktų reikalus. MDN:

Palikuonių selektorius yra brangiausias CSS selektorius. Tai yra be galo brangu, ypač jei selektorius yra žymos ar universalios kategorijos.

Bet tik lyginant su kitais selektoriais. Tai vis dar žaibiškai greitai ir tikriausiai to niekada nepastebėsite, nebent išprotėsite.

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks Bet koks Bet koks Bet koks Bet koks