Calcule a especificidade CSS e descubra qual regra vence
Cole seletores para contar a especificidade, ou cole o CSS e um elemento para ver a regra que se aplica.
- Roda no seu dispositivo
- Sem cadastro
- Funciona offline depois de uma visita
Estilos padrão do navegador e outras folhas de estilo não estão incluídos. Nada é enviado.
| Seletor | Especificidade | Peso | Contexto |
|---|
| Regra | Valor | Especificidade | Camada | Resultado |
|---|
Como descubra qual regra CSS vence
- Escolha um modo: contar seletores ou encontrar a regra vencedora.
- Cole os seletores ou o CSS, o HTML e a propriedade.
- Leia a pontuação, ou a regra vencedora e o motivo de cada outra ter perdido.
Perguntas
Como a especificidade é calculada?
Cada id conta 1,0,0, cada classe, atributo ou pseudo-classe 0,1,0, e cada nome de elemento ou pseudo-elemento 0,0,1. O seletor universal e :where() não contam nada.
Como :is(), :not() e :has() são contados?
Eles contam pelo argumento mais forte. Assim, :is(#a, .b) p tem 1,0,1, porque #a é a parte mais forte dentro de :is(). A regra com :where(#a) p tem 0,0,1.
Por que uma regra em camada perde para uma regra comum?
Para declarações normais, regras fora de qualquer camada vencem regras em camadas. Com !important a ordem se inverte, e uma camada anterior vence. Um atributo style normal vence todas as regras de folhas de estilo normais, e um atributo style com !important vence todas as outras regras com !important.
Meu CSS é enviado para algum lugar?
Não. Seu navegador analisa e compara os seletores nesta aba, e nada é enviado a um servidor.
Avaliações
Ainda não há avaliações. Seja o primeiro.