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