O "C" de CSS
E se duas regras mandarem coisas diferentes no mesmo elemento? Precisa ter um desempate — é a cascata (o Cascading do nome).
A regra da especificidade, do mais forte ao mais fraco:
- id
#titulo— o mais específico, vence - classe
.destaque - elemento
h1
h1 { color: red; } /* fraco */
.especial { color: green; } /* mais forte → vence */
Um <h1 class="especial"> fica verde: a classe é mais específica que o elemento.
Empate? (mesma especificidade) → vence a última regra escrita no arquivo.
⚠️ Por que isso vira dor de cabeça: se você estiliza tudo por
id, depois fica quase impossível sobrescrever. Por isso a recomendação: prefira classes. Quando "meu CSS não está aplicando", quase sempre é outra regra mais específica ganhando.
