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.
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.
Selektor( a , b , c , d )
vergleiche: ↑ , ↑ , ↑ , ↑
Selektor( a , b , c , d )
Wie im Originaltext auf w3c.org gezeigt, ist es in vier Gruppen a, b, c und d unterteilt, die alle positive ganze Zahlen sind. Der Standardwert ist 0, was unterschiedlichen Selektorstrukturen und Kompositionsformen entspricht. 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.
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 Ergebnisse stammen aus diesem 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 webjx.com zu kommen, um zu diskutieren!
Hier sind einige Beispiele: 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:
* 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“) 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.