A cascata completa: !important, inline e camadas
Especificidade e ordem resolvem a maioria das disputas, mas não todas. Existem outras regras de desempate, e conhecê-las evita o uso de !important como remendo.
Estudar esta lição interativa →Até aqui, duas coisas decidiam quem vence: a especificidade e a ordem. A cascata real tem mais degraus. O navegador confere, nesta ordem, e o primeiro critério que separa as regras decide a disputa: 1) a importância (um !important vence uma declaração normal); 2) o estilo escrito direto no HTML, no atributo style; 3) as camadas, criadas com @layer; 4) a especificidade do seletor; 5) a ordem no código.
Pense na fila de um pronto-socorro. Quem chega com uma urgência marcada (!important) passa na frente de todo mundo. Entre os demais, quem trouxe um encaminhamento do médico (o estilo inline) é atendido antes. Depois entra a ala do hospital (a camada), depois a gravidade do caso (a especificidade) e, só no empate de tudo isso, a ordem de chegada (a ordem no código).
Origem
navegador, vocêO CSS padrão do navegador (o espaçamento do h1, o azul do link) tem a menor prioridade. O seu CSS sempre vence o padrão, e é por isso que sua regra para h1 funciona sem esforço.
Importância
cor: red !importantUma declaração com !important vence qualquer declaração normal, até um estilo inline. É um martelo: resolve agora e complica depois.
Estilo inline
style="color: teal"Escrito no atributo style do HTML. Vence qualquer seletor do CSS, inclusive um id, a menos que a regra do CSS use !important.
Camadas
@layer base, tema;Agrupam regras em camadas com ordem própria: uma camada declarada depois vence a anterior, e o CSS fora de qualquer camada vence todas as camadas. Frameworks usam isso para você sobrescrever sem brigar.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Cada parágrafo diz a cor que deveria aparecer e por quê. Confira no painel de estilos do F12 quais regras foram riscadas.
Quando uma regra usa !important, a única forma de sobrescrevê-la é outra regra com !important e especificidade igual ou maior, e o CSS vira uma corrida armamentista. Antes de usá-lo, pergunte: dá para vencer com uma classe a mais, com um seletor um pouco mais específico ou mudando a ordem? Reserve o !important para casos raros, como sobrescrever um estilo inline que você não controla.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Faça o vermelho vencer o estilo inline.