Die CSS -Spezifit?t ist der Kernmechanismus, der die Priorit?t von Stilen bestimmt und feststellt, welche Regel durch die Gewichtsberechnung des Selektors wirksam wird. Inline-Stile erzielen 1000 Punkte, ID-Selektoren erzielen jeweils 100 Punkte, Klassen, Attribute und Pseudoklassen erzielen jeweils 10 Punkte, Elemente und Pseudo-Elemente Punkte 1 Punkt; Verschiedene Kategorienbewertungen k?nnen nicht getragen werden; Beispielsweise sind zehn Klassenauswahlern (100 Punkte) immer noch niedriger als eine ID (100 Punkte). Der Missbrauch von! Wichtig sollte vermieden werden, die Reihenfolge der Erbschaft und Kaskade verstehen und Stilkonflikte mit Browser -Tools analysieren.

Die CSS -Spezifit?t ist einer der Kernmechanismen, die die Priorit?ten des Stils steuern. Einfach ausgedrückt, wenn mehrere CSS -Regeln auf dasselbe Element angewendet werden, bestimmt der Browser, welche Regel tats?chlich wirksam wird, indem die "Spezifit?t" jeder Regel berechnet wird.

Was ist CSS -Spezifit?t?

Spezifit?t kann als "Gewicht" -System verstanden werden. Jeder Selektor hat eine bestimmte Punktzahl, die zusammenfasst, welche Stilregel irgendwann angewendet wird.

Zum Beispiel: Wenn Sie zwei Regeln schreiben, die auf dem <p></p> -Tag funktionieren, ist eines p { color: red; } und der andere ist .highlight { color: blue; } , dann wird die .highlight -Klasse mit h?herer Spezifit?t gewonnen, und die Textfarbe ist blau.

Wie berechnet man die Spezifit?t?

Spezifit?t besteht aus vier Arten von "F?ssern", von hoch bis niedrig:

• Inline -Stile (wie style="color:red" ) → Jeder Inline -Stil erzielt 1000 Punkte
• ID -Selektor (z. #main ) → Jede ID erzielt 100 Punkte
• Klasse, Attribut- und Pseudoklasse-Selektoren (wie .class , [type="text"] , :hover ) → Jeder bewertet 10 Punkte 10 Punkte
• Element-Selektor und Pseudoelement (wie div ::before ) → Jeder Punkt 1 Punkt bewertet

Zum Beispiel:

 / * .nav #menu → 10 100 = 110 *//
#Menu .nav {
  Farbe: grün;
}

Und:

 / * div .header: schwebe → 1 10 10 = 21 */
Div.Header: Hover {
  Hintergrund: Gelb;
}

HINWEIS: Bewertungen in verschiedenen Kategorien k?nnen nicht getragen werden. Beispielsweise ist die Gesamtpunktzahl (100) von zehn Klassenauswahlern nicht so gut wie eine ID (100), da sie zu verschiedenen "Ziffern" geh?ren.

FAQs und Vorschl?ge

Vermeiden Sie Missbrauch !important

Obwohl !important kann andere Stile überschreiben, ist es ein "brutales Mittel", um die Kaskadenlogik zu zerst?ren und das Debuggen zu komplizieren. Versuchen Sie, es nicht zu verwenden oder weniger zu verwenden oder weniger zu verwenden.

Verst?ndnis der Vererbung und Kaskadenordnung verstehen

Nicht alle Stile werden nicht vererbt, noch werden die im Folgenden geschriebenen Stile wirksam. Das Verst?ndnis der Reihenfolge der Stapelung von CSS (Quelle, Wichtigkeit, Spezifit?t, Reihenfolge) kann Ihnen helfen, das Verhalten des Stils besser zu steuern.

Verwenden Sie Tools, um die Analyse zu unterstützen

Moderne Browser -Entwickler k?nnen sehen, welche Regeln jedes Element entsprechen und wie Spezifit?t. Dies ist sehr hilfreich bei Konflikten zur Fehlerbehebung.

Lassen Sie uns zusammenfassen

Das Verst?ndnis der CSS -Spezifit?t ist nicht schwierig. Der Schlüssel besteht darin, sich zu beachten, dass sie basierend auf dem Selektortyp und nicht auf Codereihenfolge oder Stylesheet -Position berechnet wird. Solange Sie die Gewichte verschiedener Selektoren verstehen, k?nnen Sie klarere und kontrollierbarere Stilregeln schreiben.

Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonVerst?ndnis der CSS -Spezifit?t und der Berechnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!