{"id":717,"date":"2024-04-22T21:55:11","date_gmt":"2024-04-23T00:55:11","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=717"},"modified":"2025-11-07T11:34:03","modified_gmt":"2025-11-07T14:34:03","slug":"cascade-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/cascade-css\/","title":{"rendered":"Cascade CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Cascade CSS<\/strong>: Voc\u00ea j\u00e1 aplicou um estilo a um elemento, mas o navegador teimosamente ignorou sua regra e manteve o estilo antigo? Essa frustra\u00e7\u00e3o \u00e9 a ess\u00eancia do mecanismo de Cascata<\/strong> no CSS.<\/p>\n\n\n\n

A palavra “Cascading” em Cascading Style Sheets<\/em> (Folhas de Estilo em Cascata) refere-se ao processo pelo qual o navegador resolve conflitos e determina qual estilo aplicar quando m\u00faltiplas regras concorrem pelo mesmo elemento.<\/p>\n\n\n\n

Neste artigo, Cascade CSS, vamos desvendar as tr\u00eas regras principais da Cascata: Origem<\/strong>, Especificidade<\/strong> e Ordem<\/strong>, que definem a prioridade final de cada estilo.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Regra 1: A Origem da Folha de Estilo<\/h2>\n\n\n\n

Antes mesmo de calcular qual seletor \u00e9 mais espec\u00edfico, o navegador considera de onde a regra CSS est\u00e1 vindo<\/strong>.<\/p>\n\n\n\n

Origem da Regra<\/strong><\/td>Prioridade (da menor para a maior)<\/strong><\/td><\/tr><\/thead>
Padr\u00e3o do Navegador<\/strong><\/td>Estilos padr\u00f5es definidos pelo browser (ex: links azuis, <h1><\/code> grande).<\/td><\/tr>
Folha de Estilo do Usu\u00e1rio<\/strong><\/td>Estilos customizados definidos pelo usu\u00e1rio (geralmente via extens\u00e3o de acessibilidade).<\/td><\/tr>
Folha de Estilo do Autor<\/strong><\/td>Seu CSS (externo, interno, inline) \u2013 o que voc\u00ea escreve.<\/td><\/tr>
Autor com !important<\/code><\/strong><\/td>Regras do Autor marcadas com !important<\/code>.<\/td><\/tr>
Usu\u00e1rio com !important<\/code><\/strong><\/td>(A mais alta) Regras do Usu\u00e1rio marcadas com !important<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

\u26a0\ufe0f O Mal Necess\u00e1rio: !important<\/code><\/strong><\/p>\n\n\n\n

O atributo !important<\/code> (ex: color: red !important;<\/code>) confere a prioridade m\u00e1xima \u00e0 declara\u00e7\u00e3o. Deve ser evitado<\/strong> no c\u00f3digo de produ\u00e7\u00e3o, pois quebra a l\u00f3gica da Cascata e torna a depura\u00e7\u00e3o e a manuten\u00e7\u00e3o do c\u00f3digo extremamente dif\u00edceis.<\/p>\n<\/blockquote>\n\n\n\n

<\/div>\n\n\n\n

2. Regra 2: Especificidade (O Sistema de Pontua\u00e7\u00e3o)<\/h2>\n\n\n\n

Se as regras v\u00eam da mesma Origem (o seu CSS), o navegador calcula a Especificidade<\/strong> de cada seletor. Este \u00e9 um sistema de pontua\u00e7\u00e3o que determina qual regra \u00e9 mais precisa.<\/p>\n\n\n\n

A pontua\u00e7\u00e3o \u00e9 calculada com base nos Seletores:<\/p>\n\n\n\n

Tipo de Seletor<\/strong><\/td>Pontua\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
Inline Style<\/strong><\/td>1,0,0,0<\/strong><\/td><p style=\"...\"><\/code><\/td><\/tr>
ID<\/strong><\/td>0,1,0,0<\/strong><\/td>#meu-id<\/code><\/td><\/tr>
Classe, Atributo, Pseudo-Classes<\/strong><\/td>0,0,1,0<\/strong><\/td>.minha-classe<\/code>, [type=\"text\"]<\/code>, :hover<\/code><\/td><\/tr>
Elemento e Pseudo-Elementos<\/strong><\/td>0,0,0,1<\/strong><\/td>p<\/code>, ::before<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Exemplo Pr\u00e1tico de Pontua\u00e7\u00e3o:<\/strong><\/p>\n\n\n\n

Seletor<\/strong><\/td>Pontua\u00e7\u00e3o (ID, Classe, Elemento)<\/strong><\/td>Resultado<\/strong><\/td><\/tr><\/thead>
p<\/code><\/td>0, 0, 0, 1<\/td>Vence:<\/strong> Qualquer outra regra com pontua\u00e7\u00e3o menor.<\/td><\/tr>
.cabecalho p<\/code><\/td>0, 0, 1, 1<\/td>Vence:<\/strong> Apenas o seletor p<\/code>.<\/td><\/tr>
#main .cabecalho<\/code><\/td>0, 1, 1, 0<\/td>Vence:<\/strong> Regras baseadas apenas em classes.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Exemplo de Conflito:<\/strong><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Regra 1: 0, 0, 1, 1 (Classe + Elemento) *\/\n.titulo h1 { \n  color: blue; \/* Perdendo *\/\n}\n\n\/* Regra 2: 0, 0, 2, 0 (Duas Classes) *\/\n.cabecalho.titulo { \n  color: red; \/* Vencedor: 0, 0, 2, 0 \u00e9 maior que 0, 0, 1, 1 *\/\n}\n<\/code><\/pre>\n\n\n\n
Neste caso, a cor vermelha<\/strong> ser\u00e1 aplicada porque a Regra 2 possui uma pontua\u00e7\u00e3o de Especificidade maior (duas classes, totalizando 0,0,2,0) do que a Regra 1 (uma classe e um elemento, totalizando 0,0,1,1).<\/p>\n\n\n\n
<\/div>\n\n\n\n
3. Regra 3: Ordem de Origem (Empate)<\/h2>\n\n\n\n
Se duas regras possuem exatamente a mesma Especificidade<\/strong>, o fator de desempate \u00e9 a Ordem de Declara\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n