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.
Como se calcula a especificidade de um seletor CSS?
A especificidade lê-se como um trio: o primeiro número conta IDs, o segundo classes, atributos e pseudoclasses, o terceiro elementos e pseudoelementos. Compara-se da esquerda, por isso 1,0,0 ganha a 0,10,0.
Que regra ganha quando dois seletores atingem o mesmo elemento?
A de maior especificidade. A ordem é estilo em linha, depois IDs, depois classes, atributos e pseudoclasses, depois elementos. O seletor universal vale zero e o !important passa por cima de tudo.
Porque é que compensa manter a especificidade baixa?
Uma especificidade baixa e previsível torna evidente que regra se vai aplicar e evita recorrer ao !important para remendar estilos. Comparar dois seletores antes de os escrever poupa surpresas depois.