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;
}
Hier gibt es zwei konkurrierende Regeln. Das eine färbt die Schaltfläche rot und das andere blau. Welche Regel wird auf das Element angewendet? Den Algorithmus der CSS-Spezifikation hinsichtlich der Spezifität verstehen um zu verstehen, wie CSS zwischen konkurrierenden Regeln entscheidet.
Spezifität ist eine der vier Phasen der Kaskade, die im letzten Modul über die Kaskade behandelt wurde.
Spezifitätsbewertung
Jede Selektorregel erhält eine Bewertung. Sie können sich die Spezifität als Gesamtpunktzahl vorstellen und jeder Selektortyp erhält Punkte auf diese Punktzahl. Die Auswahl mit dem höchsten Score gewinnt.
In einem echten Projekt konkret bedeutet das, Der Balanceakt besteht darin, sicherzustellen,dass die von Ihnen erwarteten Preisvergleichsportal-Regeln auch tatsächlich angewendet werden. während die Bewertungen im Allgemeinen niedrig gehalten werden, um Komplexität zu vermeiden. Der Score sollte nur so hoch sein, wie wir es sein müssen. und nicht die höchstmögliche Punktzahl. In Zukunft müssen möglicherweise ein wirklich wichtigeres Preisvergleichsportal angewendet werden. Wenn Sie sich die höchste Punktzahl erreichen, werden Sie sich diesen Job hart erarbeiten.
Bewertung für jeden Selektortyp
Für jeden Selektortyp erhältst du Punkte. Sie addieren alle diese Punkte, um die Spezifität eines Selektors insgesamt zu berechnen.
Universalselektor
Einen universellen Selektor (*
)
ist keine Spezifität und erhält 0 Punkte.
Das bedeutet, dass sie von jeder Regel mit mindestens einem Punkt überschrieben wird
* {
color: red;
}
Element- oder Pseudoelement-Selektor
Ein Element (Typ) oder Pseudoelement Selektor 1 Genauigkeit erhält .
Typauswahl
div {
color: red;
}
Pseudoelement-Selektor
::selection {
color: red;
}
Klasse, Pseudoklasse oder Attributselektor
Eine Klasse, Pseudoklasse oder Attribut wird 10 Punkte spezifisch.
Klassenauswahl
.my-class {
color: red;
}
Pseudoklassenauswahl
:hover {
color: red;
}
Attributauswahl
[href='#'] {
color: red;
}
Die :not()
Die Pseudoklasse selbst trägt nichts zur Berechnung der Spezifität bei.
Die als Argumente übergebenen Selektoren werden jedoch zur Berechnung der Spezifität hinzugefügt.
div:not(.my-class) {
color: red;
}
Diese Stichprobe hätte eine Spezifität von 11 Punkten
da sie einen Typselektor (div
) und eine Klasse innerhalb von :not()
hat.
ID-Auswahl
eine ID
Selektor 100 Spezifitätspunkte erhält,
solange Sie einen ID-Selektor (#myID
) und keinen Attributselektor ([id="myID"]
) verwenden.
#myID {
color: red;
}
Inline-Stilattribut
CSS, die direkt auf das Attribut style
des HTML-Elements angewendet wird
erhält einen Spezifitätswert von 1.000 Punkten.
Um es in CSS zu überschreiben,
müssen Sie einen sehr spezifischen Selektor schreiben.
<div style="color: red"></div>
!important
Regel
Schließlich erhält ein !important
am Ende eines CSS-Werts 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,
sodass nicht alles in der Gesamtregel (Auswahl und Eigenschaften) denselben Spezifitätswert erhält.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Wissen testen
Testen Sie Ihr Wissen über die Spezifitätsbewertung
Was ist der Spezifitätswert von a[href="#"]
?
Spezifität im Kontext
Die Spezifität jedes Selektors, der einem Element entspricht, wird addiert. Sehen wir uns dieses Beispiel-HTML an:
<a class="my-class another-class" href="#">A link</a>
Dieser Link enthält zwei Klassen. Wenn Sie das folgende CSS hinzufügen, erhalten Sie eine Spezifität:
a {
color: red;
}
Verweisen Sie auf eine der Klassen in dieser Regel, jetzt mit 11 Spezifitätspunkten:
a.my-class {
color: green;
}
Fügen Sie die andere Klasse jetzt mit 21 Spezifitätspunkten:
a.my-class.another-class {
color: rebeccapurple;
}
Fügen Sie dem Selektor das Attribut href
hinzu.
Sie hat jetzt 31 Spezifitätspunkte:
a.my-class.another-class[href] {
color: goldenrod;
}
Fügen Sie all dem schließlich die Pseudoklasse :hover
hinzu.
hat der Selektor 41 Spezifitätspunkte:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Wissen testen
Testen Sie Ihr Wissen über die Spezifitätsbewertung
Welche der folgenden Auswahlmöglichkeiten ist 21 Punkte wert?
article:hover a[href]
article.card.dark
article > section
Spezifität visualisieren
In Diagrammen und Spezifitätsrechnern die Spezifität wird oft so visualisiert:
Die linke Gruppe enthält id
Selektoren.
Die zweite Gruppe sind Klassen-, Attribut- und Pseudoklassenselektoren.
Die letzte Gruppe sind Element- und Pseudo-Element-Selektoren.
Der folgende Selektor ist 0-4-1
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Wissen testen
Testen Sie Ihr Wissen über Spezifitätsvisualisierungen
Welcher der folgenden Selektoren ist 1-2-1
?
#specialty:hover li.dark
li#specialty section.dark
section#specialty.dark
[data-state-rad].dark#specialty:hover
Pragmatisch zunehmende Spezifität
Nehmen wir an, wir haben CSS-Code, der wie folgt aussieht:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Mit HTML, das wie folgt aussieht:
<button class="my-button" onclick="alert('hello')">Click me</button>
Die Schaltfläche hat einen grauen Hintergrund,
da der zweite Selektor 11 Spezifitätspunkte (0-1-1
) erhält.
Das liegt daran, dass es einen Typselektor (button
) gibt,
das heißt 1 Punkt und ein Attributselektor ([onclick]
) mit 10 Punkten.
Die vorherige Regel, .my-button
, erhält 10 Punkte (0-1-0
).
da es einen Klassenselektor gibt.
Wenn Sie diese Regel optimieren 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 eine Spezifität von 20 Punkten (0-2-0
) erhält.
Ein übereinstimmender Spezifitätswert gewinnt die neueste Instanz
Bleiben wir vorerst beim Schaltflächenbeispiel und ändern das CSS zu diesem Code:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Die Schaltfläche hat einen grauen Hintergrund,
da beide Selektoren einen identischen Spezifitätswert haben (0-1-0
).
Wenn Sie die Regeln in der Quellreihenfolge ändern, wäre die Schaltfläche blau.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Dies ist der einzige Fall, bei dem neueres CSS gewinnt. Dazu muss sie der Spezifität eines anderen Selektors entsprechen, der auf dasselbe Element ausgerichtet ist.