Kürzlich habe ich einen Blog mit einer besseren Erklärung der CSS-Priorität gesehen. Obwohl es verwandte Artikel im Internet gibt, habe ich ihn dennoch als Referenz erneut veröffentlicht.
Detaillierte Erläuterung der Aussprache der CSS-Priorität. Die CSS-Priorität umfasst vier Ebenen (In-Text-Selektor, ID-Selektor, Klassenselektor, Elementselektor) und die Anzahl der Vorkommen jeder Ebene. Die Priorität von CSS wird anhand der Häufigkeit des Vorkommens dieser vier Ebenen berechnet.
Das Folgende ist ein Zitat: [Nachdruck aus GOVOs Blog]
Die Prioritätslesung sollte in „Gruppen“ eingeteilt werden. Die Gruppen werden unabhängig voneinander von links nach rechts verglichen. Sie erscheinen in Gruppen, getrennt durch Kommas.
Beispiel-Quellcode
[www.downcodes.com] Selektor( a , b , c , d )
vergleiche: ↑ , ↑ , ↑ , ↑
selector( a , b , c , d ) ist, wie im Originaltext auf w3c.org gezeigt, in vier Gruppen a, b, c, d unterteilt, alle sind positive Ganzzahlen, und der Standardwert ist 0, was verschiedenen Selektoren entspricht Strukturen und Kompositionen entstehen. Wenn Sie die Prioritäten zwischen Selektoren vergleichen, vergleichen Sie eins zu eins von links nach rechts. Wenn der Vergleich größer ist, kann der Vergleich gestoppt werden.
Beispiel-Quellcode
[www.downcodes.com] li.red.level {} /* a=0 b=0 c=2 d=1 -> Spezifität = 0 , 0 , 2 , 1 */
/*vergleiche ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> Spezifität = 0 , 0 , 1 , 1 */
/*vergleiche ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> Spezifität = 0 , 0 , 1 , 3 */
/*vergleiche ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> Spezifität = 0 , 1 , 0 , 0 */
/*vergleiche ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specifity = 1 , 0 , 0 , 0 */(In der obigen Tabelle bedeutet ↑, dass ein Vergleich noch erforderlich ist, und √ bedeutet, dass die Ergebnis wurde von hier erhalten (Ergebnis)
Darüber hinaus kann die Struktur des Selektors, sofern er korrekt geschrieben ist, nur anhand der Priorität grob bekannt sein, wie zum Beispiel:
1,0,0,0 gibt den Stil innerhalb des Elements an;
0,2,1,1 stellt einen Selektor dar, der aus zwei ID-Selektoren, einem Klassen- oder Pseudoklassen- oder Attributselektor und einem Elementselektor besteht.
Details zu den CSS-Vorrangregeln: Nachdem wir die Aussprache korrigiert haben, können wir über die detaillierten Regeln sprechen:
Der Wert der Gruppe a ist nur 1, wenn CSS in das Style-Attribut geschrieben wird, andernfalls ist er 0. Die in Style geschriebene Style-Anweisung ist eigentlich kein Selektor, daher sind hier die Werte der Gruppen b, c und d sind alle 0 und nur die tatsächlichen. Nur der Selektor hat Werte der Gruppen b, c, d.
Der B-Gruppenwert wird durch die ID-Selektor-#ID bestimmt, wie viele ID-Selektoren es gibt, und der Gruppenwert wird akkumuliert;
Die c-Wertegruppe wird durch den Klassen-, Pseudoklassen- und Attributselektor bestimmt und die Wertegruppe wird akkumuliert.
Die d-Wertegruppe wird durch den Elementnamen, dh den Elementselektor, bestimmt und die Wertegruppe wird akkumuliert.
Beachten Sie, dass diese vier Wertesätze unterschiedlichen Selektortypen entsprechen und sich nicht gegenseitig beeinflussen. Sie werden gemäß den Leseregeln verglichen.
!Wichtig, das Proximity-Prinzip und die Vererbung werden hier nicht besprochen und es gibt keinen Beispielcode. Jeder ist herzlich willkommen, zu W3Cbbs.com zu kommen, um zu diskutieren!
Hier ist ein Beispiel: CSS-Prioritätsprobleme
Die CSS-Priorität umfasst vier Ebenen (Textauswahl, ID-Auswahl, Klassenauswahl, Elementauswahl) und die Anzahl der Vorkommen jeder Ebene. Die Priorität von CSS wird anhand der Häufigkeit des Vorkommens dieser vier Ebenen berechnet.
Die Berechnungsregeln für die CSS-Priorität lauten wie folgt:
Beispiel-Quellcode
[www.downcodes.com] * Fügen Sie dem auf der Seite definierten Stil 1,0,0,0 hinzu
* Fügen Sie für jeden ID-Selektor (z. B. #id) 0,1,0,0 hinzu
* Fügen Sie 0,0,1,0 zu jedem Klassenselektor (z. B. .class), jedem Attributselektor (z. B. [attribute=]) und jeder Pseudoklasse (z. B. :hover) hinzu.
* Fügen Sie für jeden Elementselektor (z. B. p) oder Pseudoelementselektor (z. B. :firstchild) usw. 0,0,0,1 hinzu
Fügen Sie dann diese vier Zahlen separat hinzu, um den Wert jeder CSS-definierten Priorität zu erhalten.
Vergleichen Sie dann die Größe Stück für Stück von links nach rechts. Der CSS-Stil mit der größeren Zahl hat höhere Priorität.
Beispiel:
CSS-Datei oder <style> wie folgt definiert:
Beispiel-Quellcode
[www.downcodes.com] 1. h1 {Farbe: rot;}
/* Ein Elementselektor, das Ergebnis ist 0,0,0,1 */
2. Körper h1 {Farbe: grün;}
/* Zwei Elementselektoren, das Ergebnis ist 0,0,0,2 */
3. h2.grape {Farbe: lila;}
/* Ein Elementselektor und ein Klassenselektor, das Ergebnis ist 0,0,1,1*/
4. li#answer {Farbe: Marineblau;}
/* Ein Elementselektor, ein ID-Selektor, das Ergebnis ist 0,1,0,1 */
Das Stilattribut des Elements ist wie folgt definiert:
Beispiel-Quellcode
[www.downcodes.com] h1 {Farbe: blau;}
/* Auf der Seite definiert, ein Elementselektor, das Ergebnis ist 1,0,0,1*/
Hinweis: Hier werden alle Zahlen überlagert, (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
Seitdem ist die Farbe des h1-Elements blau.
Beachten:
1. Der durch !important deklarierte Stil hat die höchste Priorität. Wenn ein Konflikt vorliegt, wird er erneut berechnet.
2. Wenn die Prioritäten gleich sind, wählen Sie den zuletzt angezeigten Stil aus.
3. Der geerbte Stil hat die niedrigste Priorität.
