ZenovayTools

CSS-Spezifizitätsrechner

Berechnen Sie die Spezifizität eines beliebigen CSS-Selektors. Vergleichen Sie zwei Selektoren, verstehen Sie, welche Regel gewinnt, und lernen Sie das Spezifizitätsbewertungssystem.

Load a preset into Selector A

Specificity Scoring

ID selectors — (a)

#header, #nav

Class / attr / pseudo-class — (b)

.btn, [type=text], :hover

Type / pseudo-element — (c)

div, p, h1, ::before

Universal selector (*), combinators, and :where() contribute 0 specificity.

So verwenden Sie CSS-Spezifizitätsrechner

  1. 1Geben Sie einen CSS-Selektor in das Eingabefeld ein.
  2. 2Sehen Sie den Spezifizitätswert nach ID, Klasse und Element aufgeschlüsselt.
  3. 3Geben Sie optional einen zweiten Selektor ein, um zu vergleichen, welcher gewinnt.
  4. 4Verstehen Sie die Cascading-Regeln für Ihre Selektoren.
ZenovayAnalytics

Sehen Sie, wer gerade auf Ihrer Seite ist.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

JSON-Formatter und Validator
Formatieren, validieren und verschönern Sie JSON-Daten mit Syntaxhervorhebung und Fehlererkennung.
JWT-Decoder
Dekodieren und inspizieren Sie JWT-Token. Zeigen Sie Header, Payload und überprüfen Sie Signaturen.
Base64 Encode/Decode
Kodieren Sie Text in Base64 oder dekodieren Sie Base64 zurück in Text. Unterstützt UTF-8 und Binärdaten.
URL Codierungstool
Codieren oder decodieren Sie URL-Komponenten. Verarbeiten Sie Sonderzeichen, Abfragezeichenfolgen und vollständige URLs.

Häufig gestellte Fragen

Wie wird CSS-Spezifität berechnet?▾
CSS-Spezifität wird als Tripel (a, b, c) berechnet: a = Anzahl der ID-Selektoren (#id), b = Anzahl der Klassen-Selektoren (.class), Attribut-Selektoren ([attr]) und Pseudo-Klassen (:hover), c = Anzahl der Typ-Selektoren (div, p) und Pseudo-Elemente (::before). Inline-Stile haben Spezifität (1,0,0,0) – über allen Stylesheet-Regeln. !important überschreibt alle Spezifität. Universal-Selektor (*), Kombinatoren (+, >, ~, Leerzeichen) und :is()/:not() fügen keine Spezifität hinzu.
Welcher Selektor gewinnt bei einem Konflikt?▾
Der Selektor mit höherer Spezifität gewinnt. Wenn die Spezifitäten gleich sind, gewinnt die Regel, die später im Stylesheet erscheint (Quellenreihenfolge). Zum Vergleich: (1,0,0) schlägt (0,9,9), weil IDs mehr wiegen als jede Anzahl von Klassen. Der Vergleich ist nicht arithmetisch – er ist lexikografisch: vergleichen Sie zuerst (a), dann (b), dann (c). Ein ID schlägt immer jede Anzahl von Klassen.
Welche Spezifität haben :is(), :not() und :where()?▾
:is() und :not() nehmen die Spezifität ihres spezifischsten Arguments: :is(#id, .class) hat Spezifität (1,0,0), weil #id das spezifischste Argument ist. :where() hat immer null Spezifität, egal welche Argumente – nützlich für Utility-Klassen, die Sie leicht überschreiben möchten. :not() selbst trägt null bei, aber das Argument innen trägt normal bei.
Wie beeinflusst !important die Spezifität?▾
!important überschreibt alle Spezifität für die Eigenschaft, auf die es sich bezieht. Es ändert jedoch nicht den Spezifitäts-Score. Zwei Deklarationen mit !important werden normal nach Spezifität verglichen. Best Practice: vermeiden Sie !important. Wenn Sie ein Third-Party-Stylesheet überschreiben müssen, versuchen Sie stattdessen, die Spezifität zu erhöhen. Verwenden Sie !important nur für Utility-Klassen, die niemals überschrieben werden sollten, wie .visually-hidden oder .sr-only.
Welche Spezifität haben Inline-Stile?▾
Inline-Stile (style="color: red") haben die höchste Spezifität jeder Selektor-basierten Regel, geschrieben als (1,0,0,0) in der 4-teiligen Notation, die Inline enthält. Kein Selektor in einem Stylesheet kann einen Inline-Stil ohne !important überschreiben. Dies ist der Grund, warum CSS-Frameworks häufig Inline-Stile vermeiden – sie sind zu schwer zu überschreiben. Verwenden Sie stattdessen CSS-Benutzervariablen oder Klassen für wartbaren Code.