För att få information om varför du inte ska använda *
och varför >
är bra, är det viktigt att förstå hur CSSDOM är uppbyggt.
När du har en selektor, till exempel div p .someclass
, måste webbläsaren utföra en rad kontroller.
För det första kommer den att samla in alla element med .someclass
. Detta är en ganska enkel operation. Den kommer sedan att kontrollera alla föräldrar till alla .someclass
som den samlat in och se om det har en p
-förälder, och kassera de som inte har det. Därefter kommer den att kontrollera alla föräldrar till alla de p-taggar som hade .someclass
barn som den har samlat in igen för att hitta div
föräldrar. Det är så den tar reda på var den står. Om du bara hade kunnat använda .specific-someclass
hade det naturligtvis varit mycket billigare.
Det är här som värdet av >
kommer in. Om du har div > p > .someclass
kan webbläsaren, när den kontrollerar om p
är förälder till .someclass
, sluta direkt. Den behöver bara gå upp en nivå. Det är mycket billigare! Försök att alltid använda direkt nedstigande selektor när det är möjligt, även om det inte är nödvändigt.
När en *
dyker upp måste webbläsaren samla in varje enskilt element på sidan. Detta är en dyr uppgift, så det är bättre att undvika det. Om det är #some-very-specific-id *
är det första webbläsaren gör att samla ihop varje enskilt element och sedan kontrollera varje enskilt element för att se vilka som har #some-very-specific-id
som förfader. Varenda jävla element på sidan kontrolleras. Dålig juju.
Bortförklaringar om min information är föråldrad. Det var länge sedan jag behövde veta något om CSS-målning.