CSS-Selektor-Spezifitätsrechner
Berechnet sofort die Spezifität (A-B-C) eines CSS-Selektors
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Geben Sie einen CSS-Selektor ein, und das Tool zerlegt ihn automatisch in ID-Anzahl (A), Klassen-/Attribut-/Pseudoklassen-Anzahl (B) und Tag-/Pseudoelement-Anzahl (C), um den Spezifitätswert anzuzeigen. Praktisch für Frontend-Entwickler, die herausfinden möchten, warum ein Stil nicht greift oder welche Regel gewinnt — alles läuft lokal im Browser, ohne dass Daten an einen Server gesendet werden.
Anleitung
- Geben Sie den zu analysierenden CSS-Selektor in das Eingabefeld ein (z. B. div.content > p::first-line)
- Prüfen Sie die automatisch berechneten Werte A (IDs), B (Klassen/Attribute/Pseudoklassen) und C (Tags/Pseudoelemente)
- Sehen Sie sich den finalen Spezifitätswert im A-B-C-Format an
- Gehen Sie die Liste der extrahierten Komponenten durch, um zu sehen, wie jeder Teil des Selektors gezählt wurde
FAQ
- Wie wird die Spezifität zwischen Selektoren verglichen?
- Spaltenweise: zuerst A, dann B, dann C. Ein höheres A gewinnt immer, unabhängig von B oder C, und so weiter.
- Werden :not(), :is() und :has() berücksichtigt?
- Ja, diese funktionalen Pseudoklassen werden anhand des Selektors mit der höchsten Spezifität innerhalb der Klammern berechnet. :where() ist eine Ausnahme und trägt nichts zur Spezifität bei.
- Wird mein Selektor an einen Server gesendet?
- Nein, die gesamte Analyse und Berechnung erfolgt lokal per JavaScript im Browser — es wird nichts übertragen.