Dla informacji o tym, dlaczego nie używać * i dlaczego > jest świetne, ważne jest, aby zrozumieć, jak CSSDOM jest zrobiony.
Kiedy masz selektor, powiedzmy div p .someclass, przeglądarka musi wykonać stos kontroli.
Po pierwsze, zbierze każdy element z .someclass. Jest to dość prosta operacja. Następnie sprawdzi wszystkich rodziców wszystkich .someclass, które zebrała i sprawdzi, czy ma rodzica p, odrzucając te, które go nie mają. Następnie sprawdzi wszystkich rodziców wszystkich tych znaczników p, które miały .someclass dzieci, które zebrał ponownie dla div rodziców. W ten sposób dowiaduje się, na czym stoi. Więc oczywiście, gdybyś mógł po prostu użyć .specific-someclass, byłoby to znacznie mniej kosztowne.
To właśnie tutaj pojawia się wartość >. Jeśli masz div > p > .someclass, kiedy przeglądarka sprawdza, czy p jest rodzicem .someclass, może się od razu zatrzymać. Musi tylko przemierzyć jeden poziom w górę. O wiele mniej kosztowne! Staraj się zawsze używać selektora bezpośredniego potomka, kiedy to możliwe, nawet jeśli nie jest to konieczne.
Gdy pojawi się *, przeglądarka będzie musiała zebrać każdy pojedynczy element na stronie. Jest to kosztowne zadanie, więc lepiej go unikać. Jeśli jest to #some-very-specific-id *, pierwszą rzeczą, jaką zrobi przeglądarka, będzie zebranie każdego pojedynczego elementu, a następnie sprawdzenie każdego pojedynczego elementu, aby zobaczyć, które z nich mają #some-very-specific-id jako przodka. Każdy pojedynczy cholerny element na stronie jest sprawdzany. Bad juju.
Przeprosiny, jeśli moje informacje są nieaktualne. Minęło sporo czasu odkąd musiałem wiedzieć cokolwiek o malowaniu CSS.