Wie unterscheiden sich „html', „body' und der Universal Selector (*) in der CSS-Selektor-Rangfolge?

CSS-Selektorpriorität: HTML, Body und der Universal Selector* (aktualisiert)

Es stellt sich die Frage: Wie unterscheiden sich drei Regeln wann? auf dasselbe HTML-Dokument angewendet? Lassen Sie uns die besonderen Auswirkungen dieser Selektoren untersuchen: html, body und der universelle Selektor *.

html-Selektor:

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

Diese Regel wendet Farb- und Hintergrundstile auf das an. Element. Seine Nachkommen erben die Farbe, aber nicht den Hintergrund, einschließlich des Element. Der Dem Element fehlt ein Standardhintergrund, sodass es transparent ist und das -Element sichtbar macht. Hintergrund.

Obwohl das gesamte Ansichtsfenster abgedeckt wird, ist das Der Hintergrund des Elements vergrößert seine Höhe nicht automatisch. es durchdringt einfach das Ansichtsfenster.

Körperauswahl:

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

Diese Regel wendet Farb- und Hintergrundstile auf den an. Element. Alle seine Nachkommen erben seine Farbe.

Ähnlich wie Hintergrund, der Der Hintergrund wird automatisch an das weitergegeben. Element, sofern es nicht explizit überschrieben wird. Wenn Sie daher einen einzelnen Hintergrund verwenden, platzieren Sie ihn entweder auf dem oder Elemente ergeben keinen signifikanten Unterschied.

Die Kombination von Hintergrundstilen für und kann einzigartige Effekte erzeugen, wie hier gezeigt.

Universal Selector (*):

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

Diese Regel wirkt sich auf jedes Element aus und hebt jegliche implizite Vererbung auf. Es kann jedoch leicht durch andere Regeln außer Kraft gesetzt werden, einschließlich der und Regeln, da es an Spezifität mangelt.

Vom Unterbrechen der Vererbung mit dem universellen Selektor wird im Allgemeinen abgeraten, es sei denn, dies ist unbedingt erforderlich (typischerweise für bestimmte, isolierte Elemente), da es die Vererbungsketten für alle betroffenen Eigenschaften unterbrechen kann.

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich „html', „body' und der Universal Selector (*) in der CSS-Selektor-Rangfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!