Da die von Ihnen erstellten Stylesheets immer komplexer werden, wird der Stil eines Tags von immer mehr Faktoren beeinflusst. Dieser Einfluss kann von umgebenden Tags oder vom Tag selbst ausgehen. Im Folgenden betrachten wir die CSS-Stilpriorität unter diesen beiden Aspekten.
CSS-Vererbung
Die Vererbungsfunktion von CSS bedeutet, dass auf ein Tag angewendete CSS-Eigenschaften an dessen Kind-Tags weitergegeben werden. Betrachten Sie die folgende HTML-Struktur:
<div>
<p></p>
</div>
Wenn<div>eine Eigenschaftcolor: redhat, dann wird diese Eigenschaft<p>vererbt, das heißt,<p>hat ebenfalls die Eigenschaftcolor: red。
Wie aus dem Obigen hervorgeht, wird bei einer relativ komplexen Webseite und einer tief verschachtelten HTML-Struktur der Stil eines Tags stark von den Stilen seiner Vorfahren-Tags beeinflusst. Die Einflussregel lautet:
CSS-Prioritätsregel 1:Der Stil des nächsten Vorfahren hat eine höhere Priorität als die Stile anderer Vorfahren.
Beispiel 1:
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
Wenn wir die Eigenschaften, die ein Tag von seinen Vorfahren erbt, aber nicht selbst besitzt, „Vorfahren-Stile“ nennen, dann sind „direkte Stile“ Eigenschaften, die ein Tag direkt besitzt. Es gilt außerdem die folgende Regel:
CSS-Prioritätsregel 2:„Direkte Stile“ haben eine höhere Priorität als „Vorfahren-Stile“.
Beispiel 2:
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
Selektor-Priorität
Oben haben wir die Eigenschaften besprochen, die ein Tag von Vorfahren erbt; jetzt besprechen wir die Eigenschaften, die ein Tag selbst besitzt. Bevor wir die CSS-Priorität besprechen, sprechen wir zunächst über die 7 grundlegenden CSS-Selektoren:
ID-Selektor, z. B. #id{}
Klassen-Selektor, z. B. .class{}
Attributselektor, z. B. a[href="segmentfault.com.html"]{}
Pseudoklassen-Selektor, z. B. :hover{}
Pseudoelement-Selektor, z. B. ::before{}
Tag-Selektor, z. B. span{}
Universalselektor, z. B. *{}
CSS-Prioritätsregel 3:Prioritätsbeziehung: Inline-Styles > ID-Selektoren > Klassen-Selektoren = Attributselektoren = Pseudoklassen-Selektoren > Tag-Selektoren = Pseudoelement-Selektoren
Beispiel 3:
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
Die endgültige Farbe ist Schwarz, weil Inline-Styles eine höhere Priorität haben als andere Selektoren.
Alle CSS-Selektoren setzen sich aus den oben genannten 7 Basisselektoren oder deren Kombinationen zusammen. Es gibt 3 Möglichkeiten, sie zu kombinieren:
Nachfahrenselektor: .father .child{}
Kindselektor: .father > .child{}
Benachbarter Geschwisterselektor: .bro1 + .bro2{}
Wenn ein Tag gleichzeitig von mehreren Selektoren ausgewählt wird, müssen wir die Priorität dieser Selektoren bestimmen. Wir haben die folgende Regel:
CSS-Prioritätsregel 4:Zählen Sie die Anzahl der ID-Selektoren im Selektor (a), zählen Sie die Summe der Anzahl von Klassenselektoren, Attributselektoren und Pseudoklassen-Selektoren im Selektor (b), und zählen Sie die Summe der Anzahl von Tag-Selektoren und Pseudoelement-Selektoren im Selektor (c). Vergleichen Sie die Werte in der Reihenfolge a, b und c; der größere Wert hat höhere Priorität, und wenn gleich, vergleichen Sie den nächsten. Wenn zwei Selektoren am Ende gleiche a, b und c haben, dann beurteilen Sie nach dem 'Näheprinzip'.
Beispiel 4:
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
Wie aus Regel 4 ersichtlich ist, ist die Farbe von <span> rot.
Was passiert, wenn die Stile in einem externen Stylesheet und einem internen Stylesheet in Konflikt geraten? Das hängt mit der Position des Stylesheets in der HTML-Datei zusammen. Je weiter unten die Stelle, an der der Stil angewendet wird, desto höher seine Priorität; tatsächlich lässt sich dies immer noch durch Regel 4 erklären.
Beispiel 5:
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css.html">
<style type="text/css">
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
In Bezug auf die Reihenfolge steht der interne Stil unten und wird zuletzt referenziert, daher ist die Hintergrundfarbe von <div> blau.
Im obigen Code muss die Anweisung@importvor dem internen Stil erscheinen, andernfalls ist der Dateiimport ungültig. Natürlich wird nicht empfohlen,@importCSS-ImportmethodenCSS-Importmethoden zu verwenden。
CSS bietet auch eine Möglichkeit, die oben genannten Regeln vollständig zu ignorieren. Wenn Sie unbedingt sicherstellen müssen, dass eine bestimmte Eigenschaft angezeigt wird, können Sie diese Technik verwenden.
CSS-Prioritätsregel 5:Wenn auf eine Eigenschaft!importantfolgt, dann hat die Eigenschaft die höchste Priorität. Wenn bei beiden!importanteingefügt wird, dann verwenden Sie die Regeln 3 und 4, um die Priorität zu bestimmen.
Beispiel 6:
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
Obwohl .father .son eine höhere Gewichtung hat, ist die background-Eigenschaft im Selektor p mit !important eingefügt, daher ist der Hintergrund von <p> rot.
Falsche Aussagen
Beim Lernen von CSS hast du vielleicht von einer "Gewichtung von Selektoren" gehört: Die Gewichtung eines ID-Selektors ist 100, eines Klassenselektors 10, eines Tag-Selektors 1, und dann addiert man sie und vergleicht. Obwohl diese Art des Verständnisses oberflächlich leicht zu merken ist, ist sie tatsächlich falsch.
Zum Beispiel gibt es zwei Selektoren:
.class1.class2.class3 ... （共11个类） #id
Wenn du mit der "Additions"-Methode rechnest, würdest du denken, der erstere hat eine Gewichtung von 110, der letztere 100, und der erstere sollte gewinnen. In Wirklichkeit wählt der Browser jedoch den Stil des letzteren (den mit #id).
Warum? Weil CSS Selektor-Gewichtungen nicht als "Dezimaladdition" behandelt. Der Prioritätsvergleich in CSS ist im Wesentlichen ein hierarchischer Vergleich, der als vierstelliger Vergleich verstanden werden kann:
- Inline-Styles: 1,0,0,0
- ID-Selektoren: 0,1,0,0
- Klassenselektoren, Attributselektoren, Pseudoklassen: 0,0,1,0
- Tag-Selektoren, Pseudoelemente: 0,0,0,1
Der Browser vergleicht sie von links nach rechts, nicht durch Addition. Egal wie viele Klassenselektoren du hast, sie können einen ID-Selektor nicht übertrumpfen.
Also höre auf, die "100+10+1"-Methode zu verwenden. Gewichtung ist kein Additionsspiel; sie ist ein struktureller hierarchischer Vergleich!