Gemeinschaft

Artikel Themen Fragen und Antworten

Lernen

Kurs Programmierwörterbuch

Tools-Bibliothek

Entwicklungswerkzeuge Quellcode der Website PHP-Bibliotheken JS-Spezialeffekte Website-Materialien Erweiterungs-Plug-Ins

Freizeit

Spiel-Download Spiel-Tutorials

Deutsch

简体中文 English 繁体中文 日本語 한국어 Melayu Français Deutsch

Login

singup

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

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

Barbara Streisand

Freigeben： 2024-11-28 12:06:16

Original

361 Leute haben es durchsucht

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:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

Nach dem Login kopieren

Nach dem Login kopieren

Nach dem Login kopieren

}

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:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

Nach dem Login kopieren

Nach dem Login kopieren

}

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 (*):

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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!