For at få oplysninger om, hvorfor du ikke skal bruge *, og hvorfor > er godt, er det vigtigt at forstå, hvordan CSSDOM er lavet.
Når du har en selector, f.eks. div p .someclass, skal browseren udføre en række kontroller.
Først vil den samle alle elementer med .someclass. Dette er en ret nem operation. Derefter vil den kontrollere alle forældrene til alle de .someclasses, den har samlet, og se, om det har en p-forælder, og kassere dem, der ikke har det. Derefter kontrollerer den alle forældrene til alle de p-tags, der havde .someclass-børn, som den har indsamlet igen, for div-forældre. Det er sådan, den finder ud af, hvor den står. Så selvfølgelig, hvis du bare kunne have brugt .specific-someclass, ville det have været meget billigere.
Det er her, at værdien af > kommer ind i billedet. Hvis du har div > p > .someclass, kan browseren stoppe med det samme, når den tjekker efter p forældre til .someclass, når den tjekker efter p forældre til .someclass. Den behøver kun at gå et niveau op. Det er meget mindre dyrt! Prøv altid at bruge den direkte descendent-selektor, når det er muligt, selv om det ikke er nødvendigt.
Når et * vises, skal browseren samle hvert enkelt element på siden op. Dette er en dyr opgave, så det er bedre at undgå det. Hvis det er #some-very-specific-id *, er det første, browseren vil gøre, at samle hvert enkelt element op og derefter kontrollere hvert enkelt element for at se, hvilke der har #some-very-specific-id som forfader. Hvert eneste forbandede element på siden bliver kontrolleret. Bad juju.
Apologies if my info is out of date. Det er længe siden, at jeg har skullet vide noget om CSS-maling.