CSS-Spezifitätsrechner

Was ist CSS-Spezifität?#

Wenn zwei CSS-Regeln beide versuchen, dieselbe Eigenschaft am selben Element zu setzen, wählt der Browser nicht die zuletzt geschriebene — er wählt die mit der höheren Spezifität. Spezifität ist eine dreiteilige Bewertung (A, B, C), die die Kaskade wie eine Versionsnummer vergleicht:

• A — ID-Selektoren (#header).
• B — Klassen-Selektoren (.btn), Attribut-Selektoren ([type=email]) und Pseudoklassen (:hover, :focus).
• C — Typ-Selektoren (div, a) und Pseudoelemente (::before, ::first-line).

A wird zuerst verglichen; ein Gleichstand fällt durch zu B, dann C. Eine ID (1,0,0) schlägt jede Anzahl Klassen (0,99,99), die wiederum jede Anzahl Typen schlägt. Das universelle *, die Kombinatoren (> + ~) und der Nesting-Selektor & tragen nichts bei.

Diese Seite berechnet dieses Tupel für jeden Selektor, den Sie einfügen — einschließlich der modernen funktionalen Pseudoklassen :is(), :where(), :not(), :has() und der of S-Klausel von :nth-child() — reiht eine Liste von Selektoren und zeigt exakt, welche Teile was beigetragen haben. Es ist der schnellste Weg, die universelle CSS-Frage zu beantworten: „Warum verliert meine Regel?“

Verwendung#

1. Klicken Sie auf Beispiel, um einen erprobten Satz Selektoren zu laden, oder leeren Sie das Feld und fügen Sie Ihre eigenen ein. Sie können einen nackten Selektor (#nav .item) oder eine ganze Regel (#nav .item { color: red }) eingeben; das Werkzeug liest den Teil vor {.
2. Mehrere Selektoren? Trennen Sie sie mit Kommas — sie werden von der spezifischsten zur unspezifischsten gereiht und der Gewinner markiert.
3. Die rechte Fläche listet jeden Selektor mit seinem (A, B, C)-Tupel und einer farbigen Aufschlüsselung jedes Beitrags-Stücks auf (rot = ID, blau = Klasse/Attribut/Pseudoklasse, grün = Typ/Pseudoelement), sodass Sie sehen, warum die Bewertung ist, wie sie ist.
4. Die farbige Legende oben rechts erinnert Sie daran, welcher Punkt zu A / B / C gehört.
5. Wenn Ihre Regel !important enthielt, erscheint ein informativer Hinweis — !important ist eine Deklarations-Ebene-Überschreibung, die oberhalb des Spezifitätsvergleichs steht, nicht darin.

Hauptfunktionen#

• Korrekt bei den schwierigen Fällen. :where() trägt immer (0,0,0) bei; :is() / :not() / :has() nehmen die höchste Spezifität unter ihren Argumenten; das Legacy-:before und die of S-Klausel von :nth-child() werden nach Selectors Level 4 gehandhabt.
• Reiht eine kommagetrennte Liste und flaggt Gleichstände, sodass Sie auf einen Blick sehen, welche von mehreren Regeln gewinnen wird.
• Pro-Stück-Aufschlüsselung. Jedes #id, .class, [attr], :pseudoklasse, ::pseudoelement und jeder Typ wird mit dem exakten Text aufgelistet, den es beisteuerte.
• Vollständige Regeln tolerierend. Fügen Sie a:hover { text-decoration: underline } ein — Kommentare werden entfernt und der Deklarations-Block automatisch ignoriert.
• 100 % lokal. Nichts verlässt die Seite; kein Stylesheet wird geladen oder ausgewertet.

Ausführliches Beispiel#

Ein häufiges Debugging-Rätsel: Drei Regeln zielen auf denselben Link, und die falsche Farbe gewinnt. Fügen Sie sie ins Feld ein:

.button:hover
:is(.card, #hero) .button
a.button

Die Ausgabe reiht sie:

Der Gewinner ist nicht der mit den meisten Klassen. :is(.card, #hero) erbt die höchste Spezifität seiner Argumente — #hero ist eine ID, also trägt :is() (1,0,0) obwohl .card nur (0,1,0) wäre. Das Hinzufügen von .button erhöht B um eins, was (1,1,0) ergibt. Diese einzelne ID in Spalte A schlägt die zwei Klassen von .button:hover (0,2,0) — was genau die Überraschung ist, die :is() im produktiven CSS gefährlich macht.

Wenn Sie dieselbe Gruppierung ohne Spezifitätserhöhung bräuchten, würden Sie :is() gegen :where() tauschen:

:where(.card, #hero) .button   →   (0, 1, 0)

Nun steht es gleich mit a.button minus den Typ, und die Quellreihenfolge entscheidet. Das ist der ganze Grund, warum :where() existiert.

FAQ#

Warum schlägt eine ID hunderte Klassen?#

Spezifität vergleicht Spalten von links nach rechts wie eine Versionsnummer, nicht als aufsummierte Gesamtmenge. (1,0,0) ist „vorne“, weil Spalte A im ersten nicht-null und im zweiten null ist; die Spalten B und C werden nie konsultiert. Das ist Absicht — IDs sollten eindeutige Singletons sein.

Was ist der Unterschied zwischen :is() und :where()?#

Sie sind identisch in dem, was sie matchen, aber entgegengesetzt in der Spezifität. :is(.a, #b) nimmt die höchste Spezifität unter ihren Argumenten (also macht #b daraus (1,0,0)); :where(.a, #b) trägt immer (0,0,0) bei, unabhängig von seinen Argumenten. Verwenden Sie :where() für niedrig-spezifische Defaults, die Sie leicht überschreiben können, und :is(), wenn der kombinierte Selektor tatsächlich konkurrieren soll.

Schlägt ein Inline-style="…"-Attribut diese?#

Ja. Inline-Styles rangieren in der normalen Kaskade über jeder selektor-basierten Regel (sie sitzen an einem höheren Ursprung), sodass Sie ohne !important kein Selektor-Tupel gegen einen Inline-Style durchsetzen können. Das ist eine separate Achse neben der (A,B,C)-Bewertung, weshalb das Werkzeug nur Selektoren bewertet.

Wo passt !important hin?#

!important ist ein Flag auf Deklarations-Ebene, keine Selektor-Eigenschaft — es verändert das (A,B,C)-Tupel nicht. Es verschiebt die gesamte Deklaration an einen höheren Kaskaden-Ursprung, sodass eine !important-Regel eine normale Regel unabhängig von der Spezifität schlägt. Das Werkzeug notiert seine Anwesenheit informativ, hält es aber aus der Bewertung heraus.