Cascata e heranca

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/07-cascata-heranca/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Distinguir herança de uma regra direta.
• Conferir qual regra vence e por quê.

Herança e prioridade

Abra também cascata.html: o mesmo parágrafo tem tipo p, classe aviso e id teste. Confira a cor no painel Estilos; comente apenas a regra #teste, preveja e recarregue. Restaure antes de continuar.

Cor e fonte descem dos ancestrais. Margin e borda não descem: cada caixa tem as suas.

Quando duas regras falam da mesma propriedade, o navegador mede especificidade. Compare três colunas: ids, classes e tipos. Leia da esquerda para a direita. Um id supera qualquer quantidade de classes; não some 1, 10 e 100 como pontos. Esta comparação vale entre regras normais da mesma origem e camada. Empate: ganha a regra que aparece por último no CSS.

Evite !important. Ele grita mais alto e depois ninguém consegue ajustar.

Pare e experimente. No final de estilos.css, copie body { color: teal; }. Preveja quais textos herdarão a cor. Recarregue e confira. Acrescente p { color: navy; }, preveja de novo e confira a regra direta. Restaure as cores.

Atividades

1. Cor herda, margem também?
2. Classe vence tag em que situação?
3. Dez classes vencem um id?
4. Quando a última regra vence?

Respostas comentadas

1. Não. Cor pode vir do ancestral; a margem pertence à caixa.
2. Entre regras normais da mesma origem e camada que selecionam o mesmo elemento.
3. Não. Compare as colunas ids, classes e tipos; não some pontos decimais.
4. Quando os critérios anteriores da cascata empatam.

O arquivo completo

Referência do exemplo 07-cascata-heranca, reproduzida aqui para que você possa conferir sem sair da página.

cascata.html

<!doctype html><html lang="pt-BR"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Conferir cascata</title><link rel="stylesheet" href="estilos.css"><a href="#conteudo">Saltar para o conteudo</a><main id="conteudo" tabindex="-1"><h1>Cascata: mude uma regra</h1><p id="teste" class="aviso">Paragrafo ficticio para conferir a cor.</p><p><a href="index.html">Voltar</a></p></main></html>

simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Simulacao conferida. Nada foi enviado ou guardado.";});}