Das Prioritätsproblem ist eigentlich ein Konfliktlösungsproblem. Wenn dasselbe Element (oder Inhalt) von einem CSS-Selektor ausgewählt wird, müssen je nach Priorität unterschiedliche CSS-Regeln ausgewählt werden.
Die erste ist die Spezifität der CSS-Regeln. CSS2.1 verfügt über eine Reihe von Berechnungsmethoden, die durch eine vierstellige Zahlenfolge dargestellt werden (Je höher die Spezifität, desto mehr). speziell die Regel In der Priorität Es wird vorteilhafter sein, wenn es darum geht, Urteile zu fällen. Für die spezifische Berechnung der Spezifität gelten die folgenden allgemeinen Regeln für die numerische Addition in verschiedenen Situationen:
Addieren Sie für jeden ID-Selektor (#someid) 0,1,0,0.
Jeder Klassenselektor (.someclass), jeder Attributselektor (gebildet wie [attr=""] usw.), jede Pseudoklasse (gebildet wie: Hover usw.) addiert 0, 0, 1, 0
zu jedem Element oder Pseudoelemente (:firstchild) usw., add 0,0,0,1
. Zu den weiteren Selektoren gehört der globale Selektor *, add 0,0,0,0. Dies ist gleichbedeutend damit, es nicht hinzuzufügen, aber es handelt sich auch um eine Besonderheit, die später erläutert wird.
Gemäß diesen Regeln werden die Zahlenfolgen Stück für Stück addiert, um die endgültige berechnete Spezifität zu erhalten, und dann beim Vergleichen und Auswählen Stück für Stück in der Reihenfolge von links nach rechts verglichen.
Lassen Sie uns einige Beispiele nennen:
h1 {Farbe: rot;}
/* Es gibt nur einen gewöhnlichen Elementbonus, das Ergebnis ist 0,0,0,1 */
Körper h1 {Farbe: grün;}
/* Addiere zwei gewöhnliche Elemente, das Ergebnis ist 0,0,0,2 */
--Letzterer gewinnt
h2.grape {color: purple;}
/* Ein gewöhnliches Element und ein Klassenselektor werden hinzugefügt und das Ergebnis ist 0,0,1,1*/
h2 {Farbe: Silber;}
/*Ein gewöhnliches Element, das Ergebnis ist 0,0,0,1 */
--Der erstere gewinnt
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7 gewöhnliche Elemente, ein Attributselektor, zwei weitere Selektoren, das Ergebnis ist 0,0,1,7 */
li#answer {Farbe: Marineblau;}
/* Ein ID-Selektor, ein normaler Selektor, das Ergebnis ist 0,1,0,1 */
– Letzterer gewinnt
Zusätzlich zur Spezifität gibt es einige andere
Stilstile innerhalb des Regeltexts, die eine Priorität von 1,0,0,0 haben und daher immer höher sind als externe Definitionen. Hier beziehen sich In-Text-Stile auf Stile, die wie <div style="color: red">blah</div> aussehen, während sich externe Definitionen auf Regeln beziehen, die über <link>- oder <style>-Tags definiert werden.
Es gibt vor allem !wichtige Deklarationsregeln.
Wenn !important-Deklarationen in Konflikt geraten, wird die Priorität verglichen.
Wenn die Prioritäten gleich sind, werden sie in der Reihenfolge ermittelt, in der sie im Quellcode erscheinen, wobei die späteren Prioritäten Vorrang haben.
Aus der Vererbung abgeleitete Stile verfügen nicht über Spezifitätsberechnungen, die niedriger sind als alle anderen Regeln (z. B. die durch den globalen Selektor * definierten).
In Bezug auf externe Stile, die über @import geladen werden, muss @import vor allen anderen Regeldefinitionen erscheinen (wenn nicht, sollte der Browser es ignorieren), sodass nach dem Last-Come-First-Served-Prinzip im Allgemeinen Prioritätskonflikte vorherrschen.
Ich muss hier erwähnen, dass der IE @import an der falschen Position erkennen kann, aber unabhängig davon, wo sich @import befindet, wird es als vor allen anderen Regeldefinitionen betrachtet, was zu Missverständnissen führen kann.
Obwohl die Prioritätsfrage einfach erscheint, steckt dahinter dennoch ein recht komplizierter Mechanismus, der mehr Aufmerksamkeit erfordert.