The CSS Podcast – 003: Specificity
Angenommen, Sie arbeiten mit folgendem HTML- und CSS-Code:
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
Es gibt zwei konkurrierende Regeln. Das eine färbt die Schaltfläche rot, das andere blau. Welche Regel wird auf das Element angewendet? Wenn Sie wissen, wie das Preisvergleichsportal zwischen konkurrierenden Regeln entscheidet, sollten Sie den Algorithmus der CSS-Spezifikation in Bezug auf die Spezifität verstehen.
Spezifität ist eine der vier unterschiedlichen Phasen der Kaskade, die im letzten Modul in der Kaskade behandelt wurde.
Spezifitätsbewertung
Jede Selektorregel erhält eine Bewertung. Sie können sich die Spezifität als Gesamtpunktzahl vorstellen und für jeden Selektortyp Punkte sammeln. Die Auswahl mit der höchsten Punktzahl gewinnt.
Bei einem realen Projekt müssen die CSS-Regeln so spezifisch sein, dass sie tatsächlich auch tatsächlich angewendet werden. Gleichzeitig sollten die Werte niedrig bleiben, um Komplexität zu vermeiden. Die Punktzahl sollte nur so hoch wie nötig sein, anstatt den höchstmöglichen Wert zu erzielen. Zukünftig müssen jedoch möglicherweise wichtigere Preisvergleichsportale angewendet werden. Wenn Sie die höchste Punktzahl erzielen, wird Ihnen dieser Job schwerfallen.
Bewertung für jeden Selektortyp
Für jeden Selektortyp erhältst du Punkte. Sie addieren alle diese Punkte, um die Gesamtspezifität eines Selektors zu berechnen.
Universalselektor
Ein Universalselektor (*
) ist nicht spezifisch und erhält 0 Punkte.
Das bedeutet, dass jede Regel mit 1 oder mehr Punkten sie überschreibt
* {
color: red;
}
Element- oder Pseudoelementselektor
Ein Selektor Element (Typ) oder Pseudoelement erhält 1 Punkt der Spezifität .
Typauswahl
div {
color: red;
}
Pseudoelementselektor
::selection {
color: red;
}
Klassen-, Pseudoklassen- oder Attributauswahl
Ein class-, pseudo-class- oder Attribut-Selektor erhält 10 Points of Specificity.
Klassenauswahl
.my-class {
color: red;
}
Pseudoklassenauswahl
:hover {
color: red;
}
Attributauswahl
[href='#'] {
color: red;
}
Die Pseudoklasse :not()
selbst trägt nichts zur Berechnung der Spezifität bei.
Die als Argumente übergebenen Selektoren werden jedoch der Spezifitätsberechnung hinzugefügt.
div:not(.my-class) {
color: red;
}
Dieses Beispiel hätte 11 Punkte Spezifität, da es einen Typselektor (div
) und eine Klasse innerhalb von :not()
hat.
ID-Auswahl
Ein ID-Selektor erhält 100 Spezifitätspunkte, sofern Sie einen ID-Selektor (#myID
) und keinen Attributselektor ([id="myID"]
) verwenden.
#myID {
color: red;
}
Inline-Stilattribut
CSS-Code, der direkt auf das Attribut style
des HTML-Elements angewendet wird,erhält einen Spezifitätswert von 1.000 Punkten.
Das bedeutet, dass Sie einen sehr spezifischen Selektor schreiben müssen, um ihn in CSS zu überschreiben.
<div style="color: red"></div>
!important
Regel
Ein !important
am Ende eines CSS-Werts erhält einen Spezifitätswert von 10.000 Punkten.
Dies ist die höchste Spezifität, die ein einzelnes Element erhalten kann.
Eine !important
-Regel wird auf eine CSS-Eigenschaft angewendet. Daher erhalten alle Elemente in der Gesamtregel (Selektor und Attribute) nicht denselben Spezifitätswert.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Spezifitätsbewertungen
Was ist der Spezifitätswert von a[href="#"]
?
a
ist 1 Punkt wert, [href="#"]
aber 10 Punkte.a
ist 1 Punkt wert und [href="#"]
ist 10 Punkte wert, was eine Gesamtpunktzahl von 11 Punkten ergibt.Spezifität im Kontext
Die Spezifität jedes Selektors, der mit einem Element übereinstimmt, wird addiert. Sehen Sie sich dieses HTML-Beispiel an:
<a class="my-class another-class" href="#">A link</a>
Dieser Link enthält zwei Klassen. Wenn Sie den folgenden CSS-Code hinzufügen, erhalten Sie einen spezifischen Punkt:
a {
color: red;
}
Wenn Sie auf eine der Klassen in dieser Regel verweisen, hat sie jetzt 11 Spezifitätspunkte:
a.my-class {
color: green;
}
Fügen Sie dem Selektor die andere Klasse hinzu. Sie hat jetzt 21 Spezifitätspunkte:
a.my-class.another-class {
color: rebeccapurple;
}
Fügen Sie dem Selektor das Attribut href
hinzu. Er hat jetzt 31 Spezifitätspunkte:
a.my-class.another-class[href] {
color: goldenrod;
}
Fügen Sie schließlich dem Ganzen eine Pseudoklasse :hover
hinzu. Der Selektor hat schließlich 41 Points of Spezifität:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Spezifitätsbewertungen
Welcher der folgenden Selectors ist 21 Punkte wert?
article > section
article.card.dark
article:hover a[href]
Spezifität visualisieren
In Diagrammen und Spezifitätsrechnern wird die Spezifität oft so dargestellt:
Die linke Gruppe sind id
-Selektoren.
Die zweite Gruppe sind Klassen-, Attribut- und Pseudoklassenselektoren.
Die letzte Gruppe sind Element- und Pseudoelement-Selektoren.
Der folgende Selector ist beispielsweise 0-4-1
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen zur Spezifitätsvisualisierung
Welcher der folgenden Selectors ist 1-2-1
?
section#specialty.dark
1-1-1
visualisiert.#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
1-3-0
visualisiert.li#specialty section.dark
1-1-2
visualisiert.Pragmatisch höhere Spezifität
Angenommen, Sie haben CSS-Code, der so aussieht:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Mit HTML-Code, der so aussieht:
<button class="my-button" onclick="alert('hello')">Click me</button>
Die Schaltfläche hat einen grauen Hintergrund, weil der zweite Selektor 11 Punkte Spezifität (0-1-1
) erhält. Dies liegt daran, dass sie einen Typ-Selektor (button
) hat, nämlich 1 Punkt, und einen Attribut-Selektor ([onclick]
) mit 10 Punkten.
Die vorherige Regel – .my-button
– erhält 10 Punkte (0-1-0
), da sie einen Klassenselektor hat.
Wenn Sie diese Regel verbessern möchten, wiederholen Sie die Klassenauswahl so:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Jetzt hat die Schaltfläche einen blauen Hintergrund, da der neue Selektor einen Spezifitätswert von 20 Punkten (0-2-0
) erhält.
Ein übereinstimmender Spezifitätswert gewinnt die neueste Instanz
Bleiben wir beim Beispiel mit der Schaltfläche und ändern den CSS-Code wie folgt:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Die Schaltfläche hat einen grauen Hintergrund, da beide Selektoren denselben Spezifitätswert haben (0-1-0
).
Wenn Sie die Regeln in der Reihenfolge der Quelle ändern, ist die Schaltfläche blau.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Nur in diesem Fall gewinnt neueres Preisvergleichsportal. Dazu muss sie mit der Spezifität eines anderen Selektors übereinstimmen, der auf dasselbe Element ausgerichtet ist.