Entenda a cascata CSS
Descubra qual declaração de cor vence e em que etapa a decisão é tomada.
- Funciona no navegador
- Sem upload
- Confira antes de baixar
Os dados de entrada ficam nesta aba, sem envio nem salvamento automático. As contagens agregadas de uso e os diagnósticos gerais de processamento são opcionais e só são enviados com o seu consentimento, sem conteúdo nem nomes de arquivos. Limpar ou fechar apaga os dados; salve antes os resultados de que precisar.
Limites de recursos
Cascata de cores para seletores compostos: tag, ID, classes e listas is, where e not. Até 64 regras e 16 camadas planas em ordem. Compara origem, important, inline, camada, ABC e ordem no código. O important inverte camadas e origens. Não considera ancestrais, atributos, estados, scope, herança, animação, transição nem revert. A prévia é local e limitada, sem garantia de funcionar igual em todos os navegadores e layouts. Suas entradas nunca são executadas. Baixe o HTML e o CSS juntos. Limite de tempo: 8 segundos.
Como usar
- Configure o exemplo
Descreva a tag, o ID e as classes do elemento-alvo e depois adicione regras de cor com origem, importância, indicador inline e camada. Mantenha a ordem de origem de forma intencional.
- Verifique antes de usar
Alvo p#note.note: as regras normais de autor .note { color: #0000ff } e #note { color: #ff0000 } na mesma camada resultam em vermelho; a especificidade 1,0,0 vence a 0,1,0.
- Exporte o resultado verificado
Leia os candidatos em ordem e a cor vencedora. Mude uma prioridade de cada vez e depois compare juntos a prévia local segura e o HTML e o CSS baixados.
Perguntas e limites
O que significa este resultado?
A especificidade ABC compara IDs, classes e tipos depois das prioridades mais altas da cascata. O !important muda a prioridade e inverte a ordem de camadas e de origens.
Como resolver entradas rejeitadas ou ausentes?
Ancestrais, atributos ou estados sem suporte não são simulados em silêncio. Use seletores compostos compatíveis e listas is, where e not; corrija os diagnósticos do analisador.
Quais são os limites desta ferramenta?
Cascata de cor limitada: até 64 regras e 16 camadas planas ordenadas, com um watchdog de 8 s. Não há herança, scope, animação, transição nem revert; não é um mecanismo completo de layout de navegador.