Especificidade e precedência do seletor CSS

Quando vários seletores CSS se aplicam a um único elemento, o navegador deve determinar qual seletor tem precedência. Isso é conhecido como especificidade do seletor.

Regras para determinar a especificidade do seletor:

1. !Importante e substituição de estilos embutidos:

   • Estilos declarados com o sinalizador !important ou inline usando o atributo style têm a prioridade mais alta.

2. Especificidade:

   • A especificidade de um seletor é determinada pelo número e tipo de seus componentes:

     • #id tem maior especificidade que .classname
     • .classname tem maior especificidade do que tagname

3. A última regra prevalece:

   • Se dois seletores tiverem a mesma especificidade, o último declarado no arquivo CSS terá precedência.

Exemplo:

Considere as seguintes regras CSS:

body { font-size: 14px; }
#header { font-size: 16px; }

Para o elemento

dentro do , ambas as regras se aplicam. No entanto, como o seletor #header tem maior especificidade (#id > tagname), seu valor de tamanho de fonte de 16px será aplicado ao elemento

.

Nota:

Não é incomum ter múltiplas regras direcionadas ao mesmo elemento com diferentes níveis de especificidade. Isso pode ser usado para refinar estilos para casos específicos ou substituir regras globais para instâncias específicas.