Cole o trecho HTML e o seletor. As correspondências dependem do navegador; o resumo não analisa toda a cascata.
Funciona localmente no seu navegadorCole um trecho HTML e um seletor CSS e clique em Testar seletor. O trecho é analisado em um documento separado que nunca é anexado à página, e o seletor roda no querySelectorAll do próprio navegador: um seletor que casa aqui é um seletor que o seu navegador aceita.
O resumo mostra a especificidade do grupo mais específico, quantos elementos casaram e quantos grupos separados por vírgula o seletor tem. Cada resultado aparece como tag#id.classe com os primeiros 150 caracteres do texto.
a conta seletores de ID, b conta classes, atributos e pseudo-classes, e c conta seletores de tipo e pseudo-elementos. O seletor universal vale zero: * é 0,0,0, .card > a#download é 1,1,1, ul li::before é 0,0,3 e [href] é 0,1,0.
Com um seletor separado por vírgulas o cartão mostra o grupo mais específico, que é o número aplicado pelo navegador às declarações escritas naquele grupo: a, #b mostra 1,0,0. Nada aqui considera !important, a ordem de @layer ou herança: são contagens de especificidade, não uma simulação da cascata.
:not(), :is() e :has() pontuam como o argumento mais específico: :is(#a, .b) é 1,0,0, :not(.a) é 0,1,0 e :where(#a) é 0,0,0. :nth-child(2 of .a) soma a lista que vem depois de of, o que dá 0,2,0.
Um caractere escapado continua dentro do seu identificador, então .a\.b é uma única classe (0,1,0), e um prefixo de namespace não é seletor de tipo: svg|circle conta um tipo, não dois.
O trecho é analisado sem folha de estilo, então nada é posicionado e nenhum elemento tem estado: p:hover, p:visited e p:focus não casam com nada. Scripts dentro do trecho não são executados e imagens não são baixadas.
A correspondência depende do seu navegador. O Chrome recusa svg|circle e [href i], e nesse caso a barra de status mostra a mensagem do navegador em vez de um resultado. Trechos longos são processados por inteiro: uma tabela de 400 linhas gerou 400 fichas.