Developer Tools
Design ToolsCSS-Spezifitätsrechner
CSS-Selektoren einfügen und sofort die Spezifitätswerte nebeneinander sehen. Verstehen Sie, welche Regeln gelten und warum — nach Gewichtung sortiert.
CSS-Selektoren
Schnelle Beispiele
Spezifitätsergebnisse
Spezifität wird berechnet als (a, b, c)
CSS-Selektoren oben eingeben, um ihre Spezifitätswerte zu sehen.
a
IDs
#id
b
Klassen / Attribute / Pseudoklassen
.class [attr] :hover
c
Elemente / Pseudoelemente
div p ::before
Verwandte Werkzeuge
Über den CSS-Spezifitätsrechner
Funktionsweise
- Geben Sie einen oder mehrere CSS-Selektoren, einen pro Zeile, in das Eingabefeld ein
- Das Werkzeug analysiert jeden Selektor und zählt IDs, Klassen/Attribute/Pseudoklassen und Elemente
- Die Spezifität wird als dreiteiliger Wert angezeigt: (a, b, c)
- Selektoren werden automatisch von der höchsten zur niedrigsten Spezifität geordnet
- Klicken Sie auf 'Ergebnisse kopieren', um die vollständige Spezifitätstabelle in die Zwischenablage zu kopieren
- Nutzen Sie den Vergleich, um zu verstehen, welche Selektoren andere überschreiben
Häufige Anwendungsfälle
- CSS-Überschreibungsprobleme durch Vergleich von Selektor-Gewichtungen debuggen
- CSS-Spezifitätsregeln interaktiv erlernen
- Selektoren vor dem Hinzufügen neuer Stile zu einem Stylesheet überprüfen
- CSS-Spezifität Entwicklern oder Studierenden beibringen
- Selektor-Spezifität optimieren, um den Bedarf an !important zu reduzieren
- Schnell prüfen, welche Regel gewinnt, wenn Stile in Konflikt geraten
Häufig gestellte Fragen
Was ist CSS-Spezifität?
CSS-Spezifität ist ein Gewicht, das einem CSS-Selektor zugewiesen wird und bestimmt, welche Stilregel angewendet wird, wenn mehrere Regeln auf dasselbe Element zutreffen. Sie wird als dreiteiliger Wert (a, b, c) dargestellt, wobei a ID-Selektoren, b Klassen-/Attribut-/Pseudoklassen-Selektoren und c Elementtyp- und Pseudoelement-Selektoren zählt.
Wie wird die Spezifität berechnet?
Die Spezifität wird durch Zählen von drei Kategorien in einem Selektor berechnet: (a) ID-Selektoren wie #header, (b) Klassenselektoren (.card), Attributselektoren ([type="text"]) und Pseudoklassen (:hover, :nth-child), sowie (c) Typselektoren (div, p) und Pseudoelemente (::before). Der universelle Selektor (*) und Kombinatoren (+, ~, >) haben keine Spezifität.
Welcher Selektor gewinnt, wenn zwei Regeln in Konflikt geraten?
Der Selektor mit der höheren Spezifität gewinnt. Vergleichen Sie die (a, b, c)-Werte von links nach rechts: Mehr IDs (a) schlägt immer mehr Klassen (b), und mehr Klassen schlagen immer mehr Elemente (c). Bei gleicher Spezifität gewinnt die Regel, die später im Stylesheet erscheint.
Wofür wird der Spezifitätswert in diesem Werkzeug verwendet?
Der numerische Wert ist ein vereinfachter Vergleichswert (a * 10000 + b * 100 + c) zur Rangordnung von Selektoren. Er sollte nicht als wörtlicher CSS-Wert interpretiert werden — CSS-Spezifität ist keine einzelne Zahl, sondern ein dreiteiliger Vergleich.
Beeinflusst !important die Spezifität?
!important ist kein Teil der Spezifität — es überschreibt alle anderen Deklarationen unabhängig von der Spezifität. Dieses Werkzeug berechnet nur die Selektor-Spezifität, nicht den Effekt von !important. Vermeiden Sie die Verwendung von !important in Produktions-CSS.
Hat der universelle Selektor (*) eine Spezifität?
Nein. Der universelle Selektor (*) hat null Spezifität (0, 0, 0). Kombinatoren (+, >, ~, Leerzeichen) tragen ebenfalls nichts zur Spezifität bei. Nur ID-, Klassen-, Attribut-, Pseudoklassen-, Element- und Pseudoelement-Selektoren erhöhen die Spezifität.
Wie beeinflusst :not() die Spezifität?
Die Pseudoklasse :not() selbst hat keine Spezifität, aber der Selektor darin hat eine. Zum Beispiel trägt :not(#id) (1, 0, 0) zur Spezifität bei (eine ID). Dieses Werkzeug berücksichtigt :not() korrekt, indem es das Argument in den Klammern analysiert.
Was ist der Unterschied zwischen :: und : bei Pseudoelementen?
:: ist die moderne Doppelpunkt-Syntax für Pseudoelemente (::before, ::after, ::placeholder). Die ältere Einzelpunkt-Syntax (:before, :after) wird von Browsern noch unterstützt, ist aber veraltet. Beide addieren 1 zum c-Zähler (Element/Pseudoelement).
Wie verhalten sich Inline-Styles im Vergleich zu Selektoren?
Inline-Styles (z.B. style="color: red") haben eine Spezifität von (1, 0, 0, 0) — höher als jeder Selektor — als vierte Kategorie dargestellt, die von diesem Werkzeug nicht abgedeckt wird. In der Praxis überschreiben Inline-Styles immer Stylesheet-Regeln (außer bei !important).
Kann ich Selektoren mit demselben Spezifitätswert vergleichen?
Ja. Wenn zwei Selektoren dieselben (a, b, c)-Werte haben, gewinnt der, der später in der Quellreihenfolge erscheint. Dieses Werkzeug zeigt sie mit demselben Rang an, wenn sie identische Werte haben, und Sie können die (a, b, c)-Aufschlüsselung prüfen, um ihre Gleichwertigkeit zu bestätigen.
Warum sollte ich die Spezifität in meinem CSS minimieren?
Hohe Spezifität macht Stile schwerer zu überschreiben und zu warten. Um einen Stil zu überschreiben, müssen Sie einen noch spezifischeren Selektor schreiben oder !important verwenden. Niedrige Spezifität macht Ihr CSS modularer und vorhersehbarer, besonders in großen Codebasen.
Unterstützt dieses Werkzeug alle CSS-Selektortypen?
Dieses Werkzeug unterstützt die häufigsten CSS3-Selektoren einschließlich IDs, Klassen, Attribute, Pseudoklassen (inklusive :not()), Pseudoelemente und Typselektoren. Komplexe moderne Selektoren wie :is(), :where(), :has() werden möglicherweise nicht vollständig analysiert.