CSS-Prioritätsproblem

Über CSS-Spezifität
Das Spezifitätsmerkmal von CSS oder Außergewöhnlichkeit ist ein Standard, der die Priorität von CSS-Werten misst. Da es sich um einen Standard handelt, wird eine Reihe relevanter Bestimmungsvorschriften und Berechnungsmethoden dargestellt durch a Es wird durch eine vierstellige numerische Zeichenfolge dargestellt (CSS2 ist dreistellig), was eher vier Ebenen entspricht. Die Werte sind von links nach rechts, wobei die größte auf der linken Seite ist . Es gibt keine Basis zwischen den Ziffern und die Ebenen können nicht überschritten werden.
Wenn mehrere Selektoren auf dasselbe Element angewendet werden, erhält derjenige mit dem höchsten Spezifitätswert schließlich Priorität.
Liste der Selektorspezifitätswerte:
Regeln:
1. Der Inline-Stilprioritätswert ist 1,0,0,0, was höher ist als die externe Definition.
Zum Beispiel:

sjweb

Externe Definition bezieht sich auf die über das -Tag definierten Regeln .!wichtig Der angegebene Spezifitätswert ist der höchste; Wenn die Spezifitätswerte gleich sind, wird er anhand der Reihenfolge des Auftretens im CSS-Code bestimmt, und der letztere CSS-Stil steht an erster Stelle.
4. Der durch Fortfahren erhaltene Stil hat keine Spezifitätsberechnung. Er ist niedriger als alle anderen Regeln (z. B. die durch den globalen Selektor * definierten Regeln).

Algorithmus:
Wenn mehrere Selektoren gleichzeitig erscheinen
Fügen Sie die von den Selektoren erhaltenen Spezifitätswerte Stück für Stück hinzu,
{Es gibt beispielsweise keine Basis zwischen den Ziffern : 0 ,0,0,5 + 0,0,0,5 =0,0,0,10 statt 0,0, 1, 0}
um die endgültig berechnete Spezifität zu erhalten
und dann vergleichen und wählen Sie „Stück für Stück vergleichen“ in der Reihenfolge von links nach rechts.

Beispielanalyse:
1.div { font-size:12px;}
Analyse:
1 Element {div}, Spezifitätswert ist 0,0,0,1

2.body div p{color: green;}
Analyse:
3 Elemente { body div p }, Spezifitätswert ist 0,0,0,3

3. sjweb{ font-size:12px;}
Analyse:
1 Element {div}, Spezifitätswert ist 0,0,0,1
1 Klassenselektor {.sjweb}, Spezifitätswerte sind 0 ,0,1, 0
Endgültig: Spezifitätswert ist 0,0,1,1

4.Div # sjweb { font-size:12px;}
Analyse:
1 Element {div}, Spezifitätswert ist 0,0,0,1
1 Klassenselektor {.sjweb}, Spezifitätswert ist 0,1,0, 0
Schließlich: Spezifitätswert ist 0,1,0,1


5.html > body div [id="totals"] ul li > p {color:red;}
Analyse:
6 Element { html body div ul li p} Spezifitätswert ist 0,0,0,6
1 Attributselektor { [id="totals"] } Spezifitätswert ist 0,0,1,0
2 Andere Selektoren { > 🎜>