ToolHub
Tool öffnen

CSS Spezifitäts-Rechner

Berechnen und vergleichen Sie CSS-Selektor-Spezifitätswerte mit visueller Aufschlüsselung

Entwickler-Tools
Tool starten Alle Tools

Über dieses Tool

Der CSS Spezifitäts-Rechner ermöglicht die Eingabe eines beliebigen CSS-Selektors und zeigt sofort dessen Spezifitätswert an, aufgeschlüsselt nach ID-, Klassen- und Elementdimensionen. Er unterstützt den nebeneinanderliegenden Vergleich zweier Selektoren mit automatischer Erkennung des Gewinners sowie häufig verwendete Selektorbeispiele und eine Spezifitätsregeln-Referenz.

Hauptfunktionen

Schnellvorschau

Anwendungsfälle

css specificity selector

Häufige Fragen

Was ist CSS-Spezifität?

CSS-Spezifität ist ein Bewertungssystem, das bestimmt, welche CSS-Regeln angewendet werden, wenn mehrere Selektoren auf dasselbe Element abzielen. Es berechnet Gewichtungen basierend auf dem Selektortyp: ID-Selektoren haben die höchste Gewichtung, gefolgt von Klassen- und Attributselektoren und schließlich Elementselektoren.

Wie wird die Spezifität berechnet?

Die Spezifität wird als dreiteiliger Wert (ID, Klasse, Element) berechnet. Jeder ID-Selektor fügt 1 zur ID-Spalte hinzu, jeder Klassen-, Attribut- oder Pseudoklassenselektor fügt 1 zur Klassenspalte hinzu und jeder Element- oder Pseudoelementselektor fügt 1 zur Elementspalte hinzu.

Überschreibt !important die Spezifität?

Ja, !important-Deklarationen überschreiben alle normalen Spezifitätsberechnungen. Wenn mehrere !important-Regeln in Konflikt stehen, gewinnt die mit der höheren Spezifität. Inline-Stile überschreiben ebenfalls alle selektorbasierten Spezifitäten.

Kann ich zwei Selektoren nebeneinander vergleichen?

Ja, das Tool bietet ein nebeneinanderliegendes Vergleichsfeld, in dem Sie zwei Selektoren eingeben und sofort sehen können, welcher die höhere Spezifität hat. Der Selektor mit der höheren Punktzahl wird automatisch mit einem Gewinner-Symbol markiert.

Welche Selektortypen werden vom Rechner unterstützt?

Der Rechner unterstützt ID-Selektoren, Klassenselektoren, Attributselektoren, Pseudoklassenselektoren (wie :hover und :nth-child), Elementselektoren und Pseudoelementselektoren (wie ::before und ::after). Häufig verwendete Beispiele stehen zum Einfügen per Klick bereit.

Verwandte Tools

JSON-ValidatorFarbwählerHash-GeneratorUUID-Generator