A cascata é o que torna as folhas de estilo CSS tão úteis. Em suma, a cascata define a ordem de precedência de como estilos conflitantes devem ser aplicados. Em outras palavras, se você tiver dois estilos:
p {cor: vermelho; }p {cor: azul; }
A cascata determina qual cor os parágrafos devem ter, mesmo que a folha de estilos indique que eles devem ser vermelho e azul. Em última análise, apenas uma cor pode ser aplicada aos parágrafos, então tem que haver uma ordem. E esta ordem é aplicada por quais seletores (o p no exemplo acima) têm a precedência mais alta e a ordem em que aparecem no documento.
A lista a seguir é uma simplificação de como seu navegador decide a precedência de um estilo:
- Procure na folha de estilo por um seletor que corresponda ao elemento. Se não houver estilos definidos, use as regras padrão no navegador
- Procure na folha de estilos por seletores marcados
!importantee aplique-os aos elementos apropriados. - Todos os estilos na folha de estilo substituirão os estilos de navegador padrão (exceto no caso das folhas de estilo do usuário).
- Quanto mais específico for o seletor de estilos, maior a precedência que ele terá. Por exemplo,
div> p.classé mais específico do quep.classque é mais específico do quep. - Finalmente, se duas regras se aplicam ao mesmo elemento e têm a mesma precedência de seletor, aquela que foi carregada último vai ser aplicada. Em outras palavras, a folha de estilos é lida de cima para baixo e os estilos são aplicados uns sobre os outros.
Com base nessas regras, no exemplo acima, os parágrafos seriam escritos em azul, porque p {cor: azul; } vem por último na folha de estilo.
Esta é uma explicação muito simplificada da cascata. Se você estiver interessado em aprender mais sobre como funciona a cascata, leia O que significa "Cascata" em folhas de estilo em cascata ?.
