Especificidade é como o browser escolhe entre estilos conflitantes qual aplicar a esse elemento.
Para isto o browser segue regras e neste documento estaremos estudando isso.
Como sabemos o estilo pode ser aplicado em 3 níveis:
1-Genéricamente : Em todas as tags.
2-Especificamente : Nas tags que queremos ( com as classes ).
3-Unicamente : Pelo id do elemento.
CSS definido estilos de tags
Regra um
Se ambos os estilos são de natureza absolutamente idênticas, neste caso ambos definem estilos de tags, será sempre
aplicado o último estilo.
Exemplo : No exemplo abaixo definimos um span com uma mensagem e na css desta página definimos nos estilos a cor de
fundo azul claro e depois verde claro para a mesma tag span. Qual prevalece?
Como o browser exibe:
Conflito a nível de tag
Como podemos ver, a última prevalece.
Regra dois
Se uma regra for mais específica que outra ela prevalecerá.
Exemplo1 : No exemplo abaixo definimos dois spans com mensagem e na css desta página definimos nos estilos a cor de
fundo azul claro para a span e a cor de fundo amarela para o span.classe. Qual prevalece?
Como o browser exibe:
Cor de fundo SEM classeCor de fundo COM classe
Como podemos ver, a mais específica (div.class) prevalece.
Exemplo2 : No exemplo abaixo definimos um span com uma mensagem e na css desta página definimos nos estilos a cor de
fundo azul claro e para a span e a cor de fundo amarela para o span.classe. Contudo acrescentei um terceiro
span com um id e para esta span com id defini o fundo pink. Qual prevalece
Como o browser exibe:
Cor de fundo SEM classeCor de fundo COM classeCor de fundo COM ID
Como podemos ver, a mais específica (div#id) prevalece.
Regra três
Se dentro da css for definida uma classe com !important ela sempre prevalecerá.
No exemplo abaixo colocamos uma cor de fundo para o id e outra para a classe mas na classe colocamos !important.
Como o browser exibe:
Cor de fundo SEM classeCor de fundo COM classeCor de fundo COM IDCor de fundo COM Classe e !Important
Como podemos ver, o important prevalece.
Resumo sobre a aplicação de estilos pela CSS
A sequencia abaixo esta da menor para a maior prioridade:
1-Tag
2-Classe
3-ID
4-!important