Zum Inhalt springen
TextArray1.41.0
100% lokal

CSS-Spezifität-Rechner

Berechnen Sie die Spezifität von CSS-Selektoren und sehen Sie, welche gewinnt.

Eingabe
Ausgabe
Verwandte Tools
CSS-FormatiererEntwickler-Tools
CSS-MinifierEntwickler-Tools
CSS-Einheiten-UmrechnerEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Spezifität-Rechner
Geben Sie einen oder mehrere CSS-Selektoren ein, einen pro Zeile, und dieses Tool berechnet die Spezifität jedes Selektors als dreiteilige Standardbewertung: IDs, Klassen (plus Attribute und Pseudo-Klassen) und Elemente (plus Pseudo-Elemente). Die Spezifität bestimmt, welche widersprechende Regel ein Browser anwendet. Sie ist nützlich, wenn zwei Stilregeln auf dasselbe Element abzielen und Sie wissen möchten, welche gewinnt, oder wenn Sie debuggen möchten, warum eine Überschreibung nicht funktioniert.
Aktivieren Sie die Option Kommagetrennte Listen aufteilen, um jeden Selektor in einer Liste wie ".a, .b" einzeln in einer Zeile zu bewerten, anstatt sie zu kombinieren. Nach höchster Spezifität sortieren ordnet die Ergebnisse vom höchsten zum niedrigsten Spezifitätswert. Wählen Sie Tabelle für ein Spaltenlayout mit aufgeschlüsselten IDs, Klassen und Elementen, oder 0-1-2-Notation für eine kompakte Bewertung wie "1-0-2" pro Selektor. Aufschlüsselung anzeigen listet auf, welcher Teil jedes Selektors — eine ID, eine Klasse, ein Element — zur Bewertung beigetragen hat. Dies ist der schnellste Weg, um genau zu sehen, warum eine Regel eine andere übertrumpft.
Der Rechner folgt der CSS-Selektoren-Spezifikation für knifflige Fälle: :where() zählt immer null, egal was darin ist, während :is(), :not() und :has() die Spezifität ihres spezifischsten Arguments annehmen. Ein Selektor mit !important wird gekennzeichnet, da er die normale Kaskade unabhängig von der Spezifität überschreibt. Windows- und Unix-Zeilenumbrüche werden gleich behandelt, und Leerzeilen werden ignoriert.
Alles läuft lokal in Ihrem Browser — die Selektoren, die Sie einfügen, werden nie irgendwo hochgeladen. Das ist wichtig, wenn Sie gegen eine private Codebasis prüfen. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter, oder senden Sie die Ausgabe zurück in die Eingabe, um Ihre Selektoren weiter zu verfeinern.
Häufige Fragen
Was bedeutet die 0-1-2-Notation?
Jede Zahl ist eine Spezifitätsstufe: Die erste zählt ID-Selektoren, die zweite zählt Klassen, Attribute und Pseudo-Klassen, und die dritte zählt Element- und Pseudo-Element-Selektoren. Ein Selektor mit einer höheren ersten Zahl übertrumpft immer einen mit nur einer höheren zweiten oder dritten Zahl.
Wie werden :not(), :is() und :has() bewertet?
Diese Pseudo-Klassen nehmen die Spezifität des spezifischsten Selektors in ihren Klammern an — :not(.a, #b) zählt so hoch wie #b — anstatt selbst Gewicht hinzuzufügen. :where() ist die Ausnahme: Sie zählt immer null, unabhängig davon, wie komplex die Selectorenliste darin ist.
Beeinflusst !important die Spezifitätsbewertung?
Nein. !important überschreibt die normale Kaskade unabhängig von der Spezifität, daher ändert es nicht die Bewertung eines Selektors. Das Tool kennzeichnet Selektoren, die es enthalten, als separaten Hinweis, da es beim Vergleich von Regeln leicht zu übersehen ist.
Was passiert mit einer kommagetrennte Liste wie ".a, .b"?
Bei aktivierter Option Kommagetrennte Listen aufteilen wird jeder Selektor in der Liste in einer separaten Zeile bewertet, was der Evaluierung durch einen Browser entspricht. Deaktivieren Sie die Option, um die ganze Zeile als einen kombinierten Selektor zu bewerten.
Wird mein CSS irgendwohin hochgeladen?
Nein. Die Spezifität wird vollständig in Ihrem Browser berechnet — die Selektoren, die Sie einfügen, verlassen niemals Ihr Gerät.