CSS-Spezifitäts-Rechner

CSS-Selektor-Spezifitätswerte mit a-b-c-Aufschlüsselung berechnen

Was ist das und wie funktioniert es?

CSS-Spezifität ist der Algorithmus, den Browser verwenden, um zu entscheiden, welche CSS-Regel gewinnt, wenn mehrere Regeln dasselbe Element ansprechen. Sie wird als dreiteilige Punktzahl (A, B, C) berechnet: A = Inline-Styles, B = IDs, C = Klassen, Attribute, Pseudo-Klassen und Elemente.

Dieser Rechner nimmt einen beliebigen CSS-Selektor und berechnet seine Spezifitätspunktzahl mit (A, B, C)-Aufschlüsselung.

Anwendungsfälle

• Überschreibungsdebug: Zwei Regeln zielen auf .card h2 — eine fügt Farbe hinzu, aber es funktioniert nicht. Selektoren vergleichen, um die höhere Spezifität zu finden.
• Refaktorisierungsvermeidung: Vor dem Hinzufügen einer neuen Utility-Klasse prüfen, ob sie nicht bereits durch einen Component-Selektor mit höherer Spezifität überschrieben wird.
• Interview-Vorbereitung: Spezifität von div.container > ul li.active::before berechnen.

Häufige Fragen

Wie wird Spezifität genau berechnet?

Zählen: (Inline-Styles = A), (IDs = B), (Klassen, Attribute, Pseudo-Klassen = C), (Elemente, Pseudo-Elemente = C niedriges Gewicht). Eine einzige ID schlägt immer eine beliebige Anzahl von Klassen.

Was macht !important mit der Spezifität?

!important überschreibt alle Spezifitäts- und Quellenreihenfolgeregeln. Übermäßige Verwendung zerstört die Kaskade.

Gilt Spezifität für vererbte Eigenschaften?

Nein. Vererbte Werte haben keine Spezifität — jeder explizit gesetzte Wert am Element gewinnt.

Was ist die Spezifität von :where() vs :is()?

:where() hat null Spezifität. :is() übernimmt die Spezifität seines spezifischsten Arguments.

Entwickler

UUID-Generator · Zeitstempel-Konverter · Base64-Encoder · Base64-Decoder · Hash-Generator · Farb-Konverter