Quando várias regras podem estilizar um elemento, dois mecanismos decidem o resultado: a cascata (qual regra vence) e a herança (quais propriedades passam dos pais para os filhos).
O navegador escolhe a declaração vencedora verificando, em ordem de prioridade:
1. Importance → !important beats normal declarations
2. Specificity → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
p { color: blue; } /* specificity 0,0,1 */
.text { color: green; } /* specificity 0,1,0 → wins over the element rule */
p { color: red; } /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
Certas propriedades (principalmente relacionadas a texto) são herdadas automaticamente pelos descendentes; a maioria não é.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Herdadas por padrão: color, font-*, line-height, text-align, visibility, cursor. Não herdadas: border, margin, padding, background, width, height, display.
.child {
color: inherit; /* force-take the parent's value */
border: initial; /* reset to the property's default */
all: unset; /* reset everything: inherit if inheritable, else initial */
}
É por isso que uma regra de baixa especificidade pode perder mesmo se for escrita depois — especificidade é verificada antes da ordem de origem. Entender a ordem (importance → specificity → source order) explica quase todo caso "meu estilo não está sendo aplicado".
A cascata e a herança são o modelo central de como CSS realmente se resolve.
Conhecer a ordem de precedência depura conflitos, saber quais propriedades herdam permite definir color/font uma vez em body em vez de em todos os lugares, e inherit/initial/unset lhe dão controle preciso — juntos, eles tornam o CSS previsível em vez de mágico.