Kategorie: Entwicklung
CSS-Spezifitätsrechner
Die Spezifität von Selektoren als A-B-C-Wert vergleichen
Geben Sie einen oder mehrere CSS-Selektoren ein, um deren Spezifität als ID-Klasse-Element-Wert (A-B-C) zu berechnen, sortiert danach, welche Regel gewinnen würde. Läuft vollständig in Ihrem Browser.
| Selektor | Spezifität (A-B-C) | IDs | Klassen, Attribute, Pseudoklassen | Elemente, Pseudoelemente |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Zielen zwei CSS-Regeln auf dasselbe Element, gewinnt diejenige mit der höheren Spezifität, nicht die zuletzt geschriebene. Die Spezifität wird in drei Zahlen gezählt: A für ID-Selektoren, B für Klassen, Attributselektoren und Pseudoklassen, sowie C für Elementselektoren und Pseudoelemente. Dieses Tool analysiert jeden eingegebenen Selektor, einschließlich :not(), :is(), :has() und dem spezifitätsfreien :where(), und liefert den A-B-C-Wert, sodass Sie Selektoren direkt vergleichen können, statt zu raten.
So funktioniert es
- Geben Sie einen Selektor pro Zeile ein, etwa #nav .item > a:hover.
- Lesen Sie den A-B-C-Spezifitätswert jedes Selektors.
- Sortieren Sie nach Spezifität, um zu sehen, welcher Selektor einen Konflikt gewinnen würde.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Wird mein CSS irgendwohin hochgeladen?
- Nein. Die Analyse erfolgt in JavaScript, das auf der Seite läuft, sodass Selektoren aus einem privaten Stylesheet Ihr Gerät nie verlassen.
- Wie werden :not(), :is() oder :has() bewertet?
- Sie übernehmen gemäß CSS-Spezifikation die Spezifität ihres spezifischsten Arguments, während :where() unabhängig vom Inhalt immer den Wert null beiträgt.
- Wirken sich Inline-Styles oder !important auf diesen Wert aus?
- Nein. Dieses Tool bewertet nur Selektoren. Ein Inline-Style-Attribut und !important überschreiben die normale Spezifität vollständig, statt zum A-B-C-Wert hinzugezählt zu werden.