Um zu erfahren, warum du * nicht verwenden solltest und warum > großartig ist, ist es wichtig zu verstehen, wie das CSSDOM aufgebaut ist.
Wenn du einen Selektor hast, sagen wir div p .someclass, muss der Browser eine Reihe von Prüfungen durchführen.
Zuerst wird er jedes Element mit .someclass sammeln. Dies ist ein relativ einfacher Vorgang. Dann prüft er alle Eltern aller .someclass, die er gesammelt hat, ob sie ein p-Elternteil haben, und verwirft die, die keins haben. Dann werden alle Eltern der p-Tags, die .someclass-Kinder hatten, erneut auf div-Eltern überprüft. Auf diese Weise findet es heraus, wo es steht. Hätten Sie also einfach .specific-someclass verwenden können, wäre das natürlich viel billiger gewesen.
Hier kommt der Wert von > ins Spiel. Wenn Sie div > p > .someclass haben, kann der Browser, wenn er nach p Eltern von .someclass sucht, sofort aufhören. Er braucht nur eine Ebene nach oben zu gehen. Das ist viel billiger! Versuchen Sie, immer den direkten Nachkommen-Selektor zu verwenden, wenn es möglich ist, auch wenn es nicht notwendig ist.
Wenn ein * auftaucht, muss der Browser jedes einzelne Element auf der Seite aufsuchen. Das ist eine kostspielige Aufgabe, also ist es besser, sie zu vermeiden. Wenn es sich um #some-very-specific-id * handelt, wird der Browser als erstes jedes einzelne Element aufsuchen und dann prüfen, welche Elemente #some-very-specific-id als Vorgänger haben. Jedes einzelne verdammte Element auf der Seite wird überprüft. Schlechtes Juju.
Entschuldigung, wenn meine Informationen veraltet sind. Es ist schon lange her, dass ich etwas über CSS-Malerei wissen musste.