Como vimos anteriormente, existem diferentes formas de aplicar estilos ao mesmo elemento através de diferentes seletores.

Para um parágrafo, "p", por exemplo, podemos utilizar uma n classes como seletores, o id ou o próprio nome do elemento.

O navegador precisa selecionar uma, entre as diversas definições que um elemento pode receber, para sobrescrever todas as outras.

Para fazer está seleção o navegador utiliza da definição de especificidade, que é dada por uma quadrupla ordenada no formato (a,b,c,d) onde:

• a: estilo inline
• b: id
• c: classe, pseudo classe e atributo
• d: elemento, pseudo elemento

Uma declaração inline possui o valor (1,0,0,0).

Uma declaração por id (#id), possui o valor (0,1,0,0).

Uma declaração através de duas classes (.classe1.classe2), possui o valor (0,0,2,0).

Uma declaração simples por elemento, possui o valor (0,0,0,1).

Uma declaração de id somada com uma declaração de classe (#id.classe), possui o valor (0,1,1,0).

Diferentes definições para o mesmo elemento são comparadas item a item de forma ordenada até encontrar um item com maior prioridade.

Exemplos:

• (1,0,0,0) e (0,0,2,0): na primeira comparação temos 1 e 0, o que prioriza a segunda definição.
• (0,1,0,0) e (0,1,2,0): na primeira comparação temos 0 e 0, na segunda 1 e 1, na terceira 0 e 2, o que prioriza a segunda definição.

Em caso de empate, quadruplas iguais, a seleção é dado pela ordem de declaração no documento.

Important!

Como último recurso, quando não conseguimos sobrescrever outra definição de CSS, podemos utilizar a palavra chave !important após o valor de um atributo.