Azért, hogy miért ne használd a *-t, és miért jó a >, fontos megérteni, hogyan készül a CSSDOM.
Ha van egy szelektorod, mondjuk a div p .someclass, a böngészőnek egy rakás ellenőrzést kell végrehajtania.
Először is összegyűjt minden .someclass elemet. Ez egy meglehetősen egyszerű művelet. Ezután ellenőrzi az összes összegyűjtött .someclass összes szülőjét, és megnézi, hogy van-e p szülője, és elveti azokat, amelyeknek nincs. Ezután az összes olyan p címke összes szülőjét, amelynek .someclass gyermekei voltak, újra megnézi, hogy van-e div szülője. Így állapítja meg, hogy hol áll. Így persze, ha csak a .specific-someclass-et használta volna, az sokkal olcsóbb lett volna.
Itt jön be a képbe a > értéke. Ha van div > p > .someclass, akkor amikor a böngésző ellenőrzi a .someclass p szüleit, akkor rögtön megállhat. Csak egy szintet kell felfelé haladnia. Sokkal kevésbé költséges! Próbáljuk meg mindig a közvetlen leszármazási szelektor használatát, ha lehetséges, még akkor is, ha nem szükséges.
Amikor megjelenik egy *, a böngészőnek minden egyes elemet össze kell gyűjtenie az oldalon. Ez költséges feladat, ezért jobb elkerülni. Ha #some-very-specific-id *, akkor a böngésző először minden egyes elemet összegyűjt, majd minden egyes elemet ellenőriz, hogy melyiknek van #some-very-specific-id az őse. Az oldal minden egyes rohadt elemét ellenőrzi. Bad juju.
Elnézést, ha az információm elavult. Régen volt már, hogy bármit is tudnom kellett a CSS festésről.