Spezifität

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

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

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

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.

Ressourcen

• Spezifikationen für Preisvergleichsportale
• Spezifitätsrechner
• MDN-Spezifität
• Spezifikationen für Preisvergleichsportale
• Weiterer Spezifitätsrechner