Gibt es einen Unterschied zwischen HTML und *?

Question

Gibt es einen Unterschied zwischen diesen beiden Selektoren zum Beispiel

html { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; 
} 

und

* { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; 
} 

Answer 1

Sie sind völlig verschieden. Obwohl font-size von allen Kindern vererbt wird, wenn sie auf html angewendet werden, kaskadiert es. Aber wenn Sie *, verwenden, erhält jedes einzelne Element die Eigenschaft. Es gibt Konsequenzen beim Anwenden von Eigenschaften wie font-size auf alle Elemente gegenüber nur html. Betrachten wir zum Beispiel diese beiden Beispiele:

html { 
 
    font-size: 3em; 
 
}

<h1>Test</h1>

Hier font-size angewendet wird, um nur das html Element. Da h1 eine Standardgröße haben, die vom Benutzeragenten-Stylesheet festgelegt wird, also 2em, ist der h1 Text tatsächlich 6em (2 x 3 = 6). Betrachten wir nun mit *:

* { 
 
    font-size: 3em; 
 
}

<h1>Test</h1>

Sie werden sehen, dass diese viel größer ist. Das liegt daran, dass wir font-size: 3em auf jedes Element angewendet haben. Die tatsächliche Größe ist also 3em (aus dem html Element) x 3em (aus dem body Element) x 3em (aus dem h1 Element wird das Standard-User-Agent-Stylesheet überschrieben). Das macht 27em, viel größer als die 3em, die wir zuerst angegeben haben, und die 6em mit html { … }! Dort ist ein großer Unterschied in Bezug auf Nebenwirkungen für html und *, weil Sie font-size und em s verwenden.

Erinnern Sie sich: der Hauptunterschied ist html wählt das html Element aus, während * jedes einzelne Element auswählt. Das hat Nebenwirkungen wie * gilt für alle Elemente, so wird em Text exponentiell größer machen.