Regras de Especificidade em CSS

No exemplo anterior, ambos os seletores eram iguais e tinham a mesma prioridade. Isso significa que a propriedade que foi escrita por último é que prevalecia.

Há também situações em que um elemento da página corresponde a vários seletores. Neste caso, em conflito de propriedades, vencerá o seletor mais específico, ou seja, o seletor mais preciso. Vamos analisar as regras de especificidade.

Primeira regra

Uma classe sempre vence um seletor de tag:

html<p class="text">texto</p>

cssp {
  color: red;
}
.text {
  color: green; /* esta cor será aplicada */
}

Результат:

Segunda regra

Um identificador (ID) sempre vence uma classe:

html<p id="elem" class="text">texto</p>

css.text {
  color: red;
}
#elem {
  color: green; /* esta cor será aplicada */
}

Результат:

Terceira regra

Em condições iguais, vence o seletor que tiver mais partes. Por exemplo, se tivermos dois seletores de tags, vencerá aquele que tiver mais tags:

html<div>
  <p>texto</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* esta cor será aplicada */
}

Результат:

Se forem dois seletores de classes, vencerá aquele em que forem especificadas mais classes (se houver seletores de tags, eles não influenciam):

html<div class="block">
  <p class="text">texto</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* esta cor será aplicada */
}

Результат: