<p>Die CSS -Spezifit?t ist der Mechanismus, mit dem die Browser entscheiden, welcher Stil unter mehreren Konfliktregeln bevorzugt wird. Es berechnet Gewichte basierend auf der Struktur des Selektors, nicht in der Reihenfolge des Codes. Die Spezifit?t besteht aus vier Ziffern: A (Inline-Stil), B (ID-Selektor), C (Klasse, Attribut, Pseudoklasse), D (Element, Pseudo-Element). Zum Beispiel ist die Spezifit?t von P (0,0,0,1), #Main P (0,1,0,1) und Style = "..." ist (1,0,0,0). Ein h?ufiges Missverst?ndnis ist, dass mehrere Klassen IDs überschreiten k?nnen, dies jedoch nicht. Es wird empfohlen, weniger ID -Stile zu verwenden und mehr Klassenkombinationen zu verwenden, um Missbrauch von! Wichtig für die Verbesserung der Wartbarkeit zu vermeiden.

<p>

<p> Die Spezifit?t eines CSS -Selektors ist ein vom Browser verwendeter Mechanismus, um zu entscheiden, welcher Stil angewendet werden soll, wenn mehrere Regeln konflikt. Es wird nicht durch den einfachen "der es sp?ter schreibt und der wirksam macht", sondern berechnet einen Gewichtswert basierend auf der Zusammensetzungsstruktur des Selektors.

---

Was ist CSS -Spezifit?t?

<p> Spezifit?t kann als "Priorit?t" einer CSS -Regel verstanden werden. Wenn mehrere Regeln demselben Element übereinstimmen und das gleiche Attribut festgelegt ist, vergleichen der Browser seine Spezifit?t und w?hlt die für "st?rkste" Regel aus.

<p> Zum Beispiel:

 P {
  Farbe: Rot;
}

#Main p {
  Farbe: Blau;
}

<p> Wenn sich das <p> Element in einem Container mit id="main" befindet, hat die zweite Regel eine h?here Spezifit?t und die Textfarbe ist blau.

---

Wie wird die Spezifit?t berechnet?

<p> Spezifit?t ist eine vierstellige Zahl, die aus vier verschiedenen Arten von Z?hlungen besteht (normalerweise als A, B, C, D):

• A : Die Anzahl der Inline -Stile (wie style="max-width:90%" )
• B : Die Anzahl der ID -Selektoren (z. #header )
• C : Die Anzahl der Klassenauswahl, Attribut-Selektoren und Pseudoklassen (wie .class , [type="text"] ,: :hover )
• D : Die Anzahl der Elemente-Selektoren und Pseudoelemente (wie div , ::before )

<p> Jeder Typ wird separat gez?hlt und dann in der Reihenfolge verglichen. Hinweis: Dies ist keine echte Dezimalzahl, sondern ein Bit-by-Bit-Vergleichssystem.

Zum Beispiel:

W?hler	A	B	C	D	Spezifische Werte
p	0	0	0	1	(0,0,0,1)
p.error	0	0	1	1	(0,0,1,1)
#main p	0	1	0	1	(0,1,0,1)
style="color:red"	1	0	0	0	(1,0,0,0)

<p> Wie aus der obigen Tabelle ersichtlich ist, ist der ID -Selektor "schwerer" als der Klassenauswahl, und der Inline -Stil ist der h?chste.

---

H?ufige Missverst?ndnisse und Vorschl?ge

<p> Viele Leute denken, dass die Verwendung mehrerer Klassen die ID überschreiten kann, aber tats?chlich funktioniert es nicht. Zum Beispiel:

 #haupts?chlich {}
.Container.sideBar.Highlight {}

<p> Ersteres hat nur eine ID, und letztere hat drei Klassen, aber das Gewicht der ID ist viel h?her als die der Klasse, sodass die Spezifit?t von #main immer noch h?her ist.

Einige praktische Vorschl?ge:

• Versuchen Sie zu vermeiden, IDs zu verwenden, um Stile festzulegen, da sie zu "stark" sind, und es wird einfach schwierig, den Stil zu überschreiben.
• Die Verwendung von Klassennamenkombinationen ist einfacher zu steuern Hierarchie und f?rderlicher zu verwenden.
• Wenn Sie feststellen, dass ein bestimmter Stil nicht abgedeckt werden kann, kann dies daran liegen, dass seine Spezifit?t zu hoch ist, sodass Sie die Browser -Entwickler -Tools verwenden k?nnen, um ihn zu überprüfen.
• Obwohl !important gewaltsam überschrieben werden kann, sollte es so wenig wie m?glich verwendet werden, da es das Debuggen erschwert.

---

Lassen Sie uns zusammenfassen

<p> Die Spezifit?tsberechnung ist nicht kompliziert, basiert jedoch eher auf der "Komponentenanalyse" der Selektorstruktur als auf einer einfachen numerischen Summation. Wenn Sie diesen Mechanismus verstehen, k?nnen Sie klarere und kontrollierbare CSS schreiben und unn?tige !important und doppelte Code reduzieren.

<p> Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonWie wird die Spezifit?t für CSS -Selektoren berechnet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!