A cascata: quando várias regras competem
"Coloquei color: red e o texto continua azul." Essa é, de longe, a dúvida nº 1
de quem está começando com CSS. E quase nunca é um bug: é a cascata fazendo o
trabalho dela. Sobre um mesmo elemento podem se aplicar várias regras que mexem
na mesma propriedade, e a cascata (o C de CSS) é o algoritmo que decide qual
vence. O navegador as ordena, nesta ordem de prioridade:
- Origem e importância. As folhas do autor (as suas) pesam mais que as
do navegador por padrão. Uma declaração com
!importantsobe de nível. - Especificidade. Em igualdade de origem, vence o seletor mais específico (vemos isso em detalhe na próxima lição).
- Ordem de aparição. Se houver empate de especificidade, vence a última regra declarada.
p { color: black; }
p { color: blue; } /* esta vence: mesma especificidade, vem depois */
No exemplo ambas as regras têm especificidade idêntica, então a ordem decide:
o <p> é pintado de azul. Regra mental rápida: em igualdade de força, vence
a que você escreveu por último. Por isso às vezes basta mover uma regra algumas
linhas para baixo para ela finalmente "se aplicar".
A herança: propriedades que viajam para baixo
Algumas propriedades, se não forem especificadas, são herdadas do elemento pai. São, sobretudo, as relativas ao texto:
- São herdadas:
color,font-family,font-size,line-height,text-align,visibility... - Não são herdadas:
margin,padding,border,background,width,height,display...
body { color: #333; font-family: system-ui; }
/* Um <p> dentro de <body> herda color e font-family
mesmo que não tenha nenhuma regra própria. */
Você pode forçar o comportamento com valores especiais:
.caixa { color: inherit; } /* herda explicitamente do pai */
a { color: inherit; } /* o link assume a cor do texto que o envolve */
A herança evita repetir regras: você define a tipografia base no body uma vez e
todo o documento a respeita, exceto onde você a sobrescrever. Pense nisso como um
sobrenome de família: o filho o carrega sem pedir, até decidir trocá-lo de
propósito.