Quem ganha e por quê
Você já escreveu uma regra de CSS que, aparentemente, não teve efeito nenhum? Quase sempre outra regra mais forte estava vencendo por baixo dos panos.
Estudar esta lição interativa →O "C" de CSS significa Cascading, em cascata. Quando mais de uma regra mira o mesmo elemento com a mesma propriedade, o navegador precisa decidir qual delas vence. Essa decisão segue regras precisas, não é aleatória, e entender essas regras é o que separa "ficar tentando adivinhar" de "saber exatamente por que uma cor apareceu".
Dois fatores decidem a disputa, nesta ordem de importância: primeiro a especificidade (o quão "preciso" é o seletor: um id é mais específico que uma classe, que é mais específica que uma tag), e só em caso de empate de especificidade, a ordem no código (a última regra escrita vence).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Duas regras "p" empatam em especificidade (a última escrita venceria), mas p.destaque é mais específica e ganha de qualquer uma das duas.
Um exemplo de produto real: é comum um projeto ter um arquivo de estilos "base" (cores e fontes gerais do site) e, depois, estilos específicos de uma página (uma cor diferente só na página de promoções). Se o seletor da página específica for menos específico que o do arquivo base, ele perde a disputa e "não funciona", mesmo estando tecnicamente correto e vindo depois no código. (Só com a mesma especificidade é que o que vem depois vence.)
Quando uma cor (ou qualquer propriedade) "não aparece" mesmo com a regra escrita certinha, quase sempre existe outra regra, em outro lugar do CSS, vencendo a disputa. Nas ferramentas de desenvolvedor do navegador (F12), o painel de estilos mostra todas as regras que miram aquele elemento, e risca as que perderam, um jeito direto de ver a cascata em ação.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione uma terceira regra p e veja qual cor vence.