Especificidade CSS

A especificidade CSS determina qual regra prevalece quando várias regras visam o mesmo elemento. É expressa como (a, b, c) e comparada componente a componente, da esquerda para a direita.

Componentes da especificidade

Componente	Valor	Exemplos
a, ID	0-1-0-0	`#header`, `#nav`
b, Classe/atributo/pseudo-classe	0-0-1-0	`.btn`, `[type="text"]`, `:hover`
c, Tipo/pseudo-elemento	0-0-0-1	`div`, `p`, `::before`
Universal / combinadores	0-0-0-0	`*`, `>`, `+`, `~`

Regras de comparação

A comparação é feita da esquerda para a direita. Um único ID (0,1,0,0) supera qualquer número de classes. Exemplo: #nav .link = (0,1,1,0) supera .menu .item a = (0,0,2,1).

Casos especiais

!important supera toda a especificidade (usar apenas como último recurso)
:is() e :has() herdam a especificidade do seu argumento mais específico
:where() tem sempre especificidade zero, útil para resets
Os estilos inline têm especificidade (1,0,0,0)