Voor informatie over waarom je *
niet moet gebruiken en waarom >
geweldig is, is het belangrijk om te begrijpen hoe de CSSDOM wordt gemaakt.
Wanneer je een selector hebt, bijvoorbeeld div p .someclass
, moet de browser een stapel controles uitvoeren.
Op de eerste plaats zal hij elk element met .someclass
bij elkaar zoeken. Dit is een vrij eenvoudige operatie. Vervolgens controleert hij alle parents van alle .someclass
es die hij heeft verzameld en kijkt of het een p
parent heeft, en gooit degene weg die dat niet hebben. Vervolgens controleert hij alle ouders van alle p-tags met .someclass
-kinderen die hij heeft verzameld op div
-ouders. Dat is hoe het uitzoekt waar het staat. Dus natuurlijk, als je gewoon .specific-someclass
had kunnen gebruiken, zou dat veel minder duur zijn geweest.
Daar komt de waarde van >
om de hoek kijken. Als u div > p > .someclass
hebt, kan de browser, wanneer hij kijkt of p
ouders zijn van .someclass
, meteen stoppen. Hij hoeft maar één niveau omhoog te gaan. Veel minder duur! Probeer altijd de direct descendent selector te gebruiken als dat mogelijk is, zelfs als het niet nodig is.
Wanneer er een *
verschijnt, zal de browser elk element op de pagina moeten verzamelen. Dit is een dure taak, dus het is beter om het te vermijden. Als het #some-very-specific-id *
is, is het eerste wat de browser zal doen, elk element verzamelen en dan elk element bekijken om te zien welke #some-very-specific-id
als voorouder hebben. Elk verdomd element op de pagina wordt gecontroleerd. Slechte juju.
Mijn excuses als mijn info verouderd is. Het is lang geleden dat ik iets moest weten over CSS schilderen.