CSS Specificity Calculator
1
ID
2
Classes/Attr
1
Elements
121
Total
0
ID
2
Classes/Attr
1
Elements
21
Total
Vince il selettore
A
Specificità 1,2,1 vs 0,2,1
Domande Frequenti
Tutto quello che devi sapere sulla specificità CSS
Come si calcola la specificità CSS?
La specificità è calcolata come una tripla (a,b,c): "a" conta gli ID (#id), "b" conta classi (.class), attributi ([attr]) e pseudo-classi (:hover), "c" conta gli elementi (div, p) e pseudo-elementi (::before). Per confrontare, si legge da sinistra: 1,0,0 batte sempre 0,10,0.
Cosa batte cosa nella specificità CSS?
Lo stile inline (style="") ha specificità 1,0,0,0 e batte tutto. Poi vengono gli ID (0,1,0,0), poi classi/attributi/pseudo-classi (0,0,1,0), poi elementi/pseudo-elementi (0,0,0,1). Il selettore universale (*) ha specificità 0. !important sovrascrive tutto.
Perché la specificità è importante?
Quando più regole CSS si applicano allo stesso elemento, quella con specificità più alta vince. Capire la specificità evita sorprese di stile e riduce l'abuso di !important. Una buona architettura CSS mantiene la specificità bassa e prevedibile.
Wie berechnet man die Spezifität eines CSS-Selektors?
Die Spezifität liest sich als Tripel: Die erste Zahl zählt IDs, die zweite Klassen, Attribute und Pseudoklassen, die dritte Elemente und Pseudoelemente. Verglichen wird von links, 1,0,0 schlägt also 0,10,0.
Welche Regel gewinnt, wenn zwei Selektoren dasselbe Element treffen?
Die mit der höheren Spezifität. Die Reihenfolge lautet Stil im Attribut, dann IDs, dann Klassen, Attribute und Pseudoklassen, dann Elemente. Der Universalselektor zählt null, und !important setzt sich über alles hinweg.
Warum lohnt es sich, die Spezifität niedrig zu halten?
Eine niedrige, vorhersagbare Spezifität macht offensichtlich, welche Regel greift, und erspart den Griff zu !important, um Stile zu flicken. Zwei Selektoren vorher zu vergleichen verhindert Überraschungen.