Verificador CSS de Renderização Real da Regra VencedoraUsar o motor do navegador para verificar qual regra CSS vence

Por que é preciso realmente renderizar, e não apenas calcular?

A maioria das calculadoras de especificidade CSS na internet apenas insere o seu seletor numa fórmula e devolve uma pontuação — por exemplo, #main p obtém (1,0,1) e .card.active obtém (0,2,0). Mas o que um navegador real decide quando várias regras entram em conflito também depende da herança, da ordem da cascata, do !important, e de como cada propriedade é escrita em regras diferentes — tudo isso as calculadoras teóricas ignoram. Esta ferramenta segue uma abordagem diferente: renderiza o HTML e o CSS que você colou dentro de um iframe oculto, para que o navegador aplique realmente os estilos, e depois lê o resultado real com getComputedStyle(). O que você vê é o que o navegador realmente decidiu — não um número calculado no papel.

Como a pontuação (a, b, c) realmente se compara — um exemplo prático

A especificidade CSS é escrita como três números (a, b, c): a conta os seletores de ID, b conta os seletores de classe/atributo/pseudoclasse, c conta os seletores de tipo/pseudoelemento. A comparação funciona como comparar algarismos — quem tiver o valor de 'a' mais alto vence de imediato, e só se compara 'b' quando há empate em 'a'. Por exemplo, #main p obtém (1,0,1) enquanto .card .title.active obtém (0,3,0) — ainda assim #main p vence, porque 1 > 0 em 'a', mesmo que o outro seletor acumule três classes. Se duas regras tiverem exatamente a mesma especificidade, o navegador aplica a que foi definida mais tarde no CSS — por isso a ordem no código-fonte também importa. O !important é a única coisa que anula completamente a especificidade: uma regra com especificidade menor, mas com !important, vence uma regra com especificidade maior que não o tenha (a menos que a outra regra também tenha !important, caso em que a especificidade volta a decidir).

Quando você deve realmente recorrer a esta ferramenta?

O gatilho clássico é: 'escrevi esta regra CSS e nada mudou na tela' — o que normalmente significa que outra regra com especificidade maior (ou !important) está a sobrepor-se a ela. Cole o HTML+CSS em conflito, indique o seletor do elemento que está a depurar, e a ferramenta lista todas as regras correspondentes com a sua pontuação de especificidade, deixando o motor real do navegador dizer qual realmente vence — sem mais adivinhações sobre qual camada da cascata está a vencer.

Esta ferramenta renderiza dentro de um iframe isolado, sem fontes, imagens ou execução de JavaScript externas, e não suporta Shadow DOM nem estilos CSS-in-JS injetados dinamicamente — cole trechos estáticos de HTML/CSS para obter resultados precisos.