CSS-Spezifität

Was ist Spezifität?

Wenn zwei oder mehr CSS-Regeln, die auf dasselbe Element verweisen, in Konflikt stehen, wird der Browser einige Prinzipien befolgen, um zu bestimmen, welche spezifischer ist und daher gewinnt.

Die Spezifität (Specificity) als Punktzahl/Bewertung betrachten, kann bestimmen, welche Style-Deklarationen letztlich auf das Element angewendet werden.

Allgemeine Selektoren (*) haben eine niedrigere Spezifität, während ID-Selektoren eine höhere Spezifität haben!

Hinweis:Diese Spezifität ist eine häufige Ursache, warum CSS-Regeln für bestimmte Elemente nicht gelten, obwohl Sie vielleicht denken, dass sie es sollten.

Spezifitätshierarchie

Jeder Selektor hat in der Hierarchie der Spezifität einen bestimmten Platz. Folgende vier Kategorien definieren die Spezifitätsebene der Selektoren:

Inline-Styles - Inline-Styles werden direkt an das Element angehängt, für das die Stile gesetzt werden sollen. Beispiel: <h1 style="color: #ffffff;">.

ID - ID ist ein einzigartiger Bezeichner für Seitelemente, z.B. #navbar.

Klassen, Attribute und Pseudo-Klassen - Diese Kategorie umfasst .classes, [attributes] und Pseudo-Klassen, wie z.B.: :hover, :focus.

Elemente und Pseudo-Elemente - Diese Kategorie umfasst Elementnamen und Pseudo-Elemente, wie z.B. h1, div, :before und :after.

Wie berechnet man die Spezifität?

Bitte merken Sie sich die Methode zur Berechnung der Spezifität!

Beginnend mit 0, fügen Sie 1000 für das style-Attribut hinzu, für jeden ID 100, für jeden Attribut, Klasse oder Pseudo-Klasse 10 und für jeden Elementname oder Pseudo-Element 1 hinzu.

Denken Sie an die folgenden drei Code-Schnipsel:

Beispiel

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Die Spezifität von A beträgt 1 (ein Element)
  • Die Spezifität von B beträgt 101 (eine ID-Referenz und ein Element)
  • Die Spezifität von C beträgt 1000 (inline-Styles)

Da 1 < 101 < 1000, hat das dritte Regel (C) eine höhere Spezifität und wird daher angewendet.

Spezifität Regel 1:

Bei gleicher Spezifität: Die neueste Regel ist wichtig - Wenn dasselbe Regel zweimal in ein externes Stylesheet geschrieben wird, wird die Regel im Stylesheet angewendet, die näher an dem Element ist, für das die Stile gesetzt werden sollen:

Beispiel

h1 {background-color: yellow;}
h1 {background-color: red;}

Probieren Sie es selbst aus

Das nächste Regel wird immer angewendet.

Spezifität Regel 2:

ID-Selektoren haben eine höhere Spezifität als Attributselektoren - Schauen Sie sich die folgenden drei Zeilen Code an:

Beispiel

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Probieren Sie es selbst aus

Das erste Regel ist spezifischer als die anderen beiden und wird daher angewendet.

Spezifität Regel 3:

Bezugswähler sind spezifischer als ein einfaches Elementwähler - Einbettungs-Stylesheets sind näher an den Elementen, für die sie样式 werden sollen. Daher im folgenden Fall:

Beispiel

Von externem CSS-Dokument:

#content h1 {background-color: red;}

Im HTML-Dokument:

<style>
#content h1 {
  background-color: yellow;
}
</style>

wird das nächste Regel anwenden.

SpecificitätsRegel 4:

KlassenSelektoren schlagen alle ElementSelektoren - KlassenSelektoren (wie .intro schlagen h1, p, div usw.):

Beispiel

.intro {background-color: yellow;}
h1 {background-color: red;}

Probieren Sie es selbst aus

Darüber hinaus,Allgemeine Selektoren und vererbte Werte haben 0 - Die Specificität von * und body *, sowie ähnliche, haben eine Specificität von 0. Die specificity der vererbten Werte ist auch 0.