Ordem de seletores (quem ganha entre id, class e tag)

O que é especificidade?

É a regra que decide qual estilo ganha quando vários CSS tentam mexer no mesmo elemento. É tipo uma disputa de poder mesmo.

Ordem de força:
🥇 #id (mais forte)
🥈 .class
🥉 tag (p, div, h1…)

Resumão:

id > class > tag

Exemplo:

<p id="titulo" class="texto">Oi</p>

p {

  color: green;

}

.texto {

  color: blue;

}

#titulo {

  color: red;

}

Resultado: vermelho (porque id ganha)

Como pensar (jeito fácil)

Cada seletor tem um “peso”:

id → 100

class → 10

tag → 1

Quem tiver maior número, ganha. Comparação:

.texto p {

  color: blue; /* 10 + 1 = 11 */

}

#titulo {

  color: red; /* 100 */

}

Ganha o #titulo

Detalhe importante:

Se tiver mesma força, entra outra regra: o que vem por último no CSS ganha.