Siga a cascata
Entenda como o navegador escolhe entre regras concorrentes.
- Comparar especificidade e ordem de origem.
Várias regras podem atingir o mesmo elemento. A cascata resolve por importância, especificidade e ordem no arquivo.
1p { color: #334155; }
2.highlight { color: #b42318; }
3
4/* The matching class rule wins over the type rule. */A highlighted paragraph uses the class color
Se especificidade empata, a última regra vence. Evite !important desnecessário.
Principais conclusões
Comparar especificidade e ordem de origem.
Prefira regras simples e reutilizáveis.
Padronize tokens e estados para facilitar evolução visual.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em CSS
Estilize a página de exemplo, veja as mudanças na prévia isolada e execute verificações nos estilos calculados.
Destaque um aviso
No parágrafo com classes note featured, faça .featured vencer usando color: #b42318.
- Resultado da cascata
Seu CSS é aplicado a uma página de exemplo em uma prévia isolada. Os testes verificam os estilos calculados.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…