CSS Spezifitätsrechner (a,b,c) online
Die Spezifität eines CSS-Selektors (a,b,c) berechnen, um zu verstehen, welche Regel gewinnt, direkt in Ihrem Browser.
Specificity: (1,2,3). The larger the tuple (compared left to right), the more the rule wins. Inline styles count as (1,0,0,0) and !important overrides all.
🔒 100 % clientseitig — keine Daten gesendet
Berechnen Sie die Spezifität eines beliebigen CSS-Selektors und erhalten Sie sofort das (a,b,c)-Tripel. Perfekt, um zu verstehen, warum eine Regel eine andere überschreibt, und um Stilkonflikte zu debuggen. Zu 100 % in Ihrem Browser, ohne Daten an einen Server zu senden.
What is it for?
- ▸ Verstehen, warum ein CSS-Stil trotz Ihrer Regel nicht angewendet wird
- ▸ Zwei Selektoren vergleichen, um zu sehen, welcher gewinnt
- ▸ Den übermäßigen Einsatz von !important durch angepasste Selektoren vermeiden
- ▸ CSS-Spezifitätsregeln lehren oder überprüfen
FAQ
Wie berechnet man die Spezifität eines CSS-Selektors?
Sie zählen drei Kategorien: (a) #id-Selektoren, (b) Klassen, Attribute und Pseudoklassen, (c) Elemente und Pseudoelemente. Fügen Sie Ihren Selektor in das Tool ein und das (a,b,c)-Tripel wird automatisch angezeigt.
Welcher CSS-Selektor hat die höchste Priorität?
Ein Inline-Style schlägt eine ID, diese schlägt eine Klasse, diese schlägt ein Element. Bei gleicher Spezifität gewinnt die zuletzt deklarierte Regel, außer wenn !important verwendet wird.
Zählt !important zur Spezifität?
Nein, !important ist nicht Teil der (a,b,c)-Berechnung: Es überschreibt die normale Kaskade auf einer höheren Ebene. Zwei !important-Regeln werden dann anhand ihrer jeweiligen Spezifität entschieden.