Ferramentas para desenvolvedores
Calculadora de Especificidade CSS
Calcule a pontuação e os componentes de especificidade de seletores CSS para resolver conflitos de estilos na folha de estilos.
Executar ferramenta
A Calculadora de Especificidade CSS analisa a hierarquia de qualquer seletor introduzido e decompõe o respetivo peso em quatro componentes distintos. Ao introduzir um seletor no campo de texto, a ferramenta identifica identificadores únicos, classes, atributos, pseudoclasses, elementos e pseudoelementos presentes na regra de estilos. Cada categoria detetada recebe uma contagem individual, sendo depois calculada uma pontuação numérica ponderada com base nos valores atribuídos a cada nível: o primeiro componente tem peso mil, o segundo peso cem, o terceiro peso dez e o quarto peso um. Se o campo permanecer vazio ou contiver apenas espaços em branco, a ferramenta apresenta todos os componentes a zero e uma pontuação nula. Esta decomposição ajuda a compreender a precedência de regras concorrentes em folhas de estilos, a evitar a utilização desnecessária de regras forçadas e a organizar o código CSS com maior clareza durante o desenvolvimento web.
Instruções
- Introduza o seletor CSS no campo de texto disponibilizado.
- Verifique a contagem apresentada para identificadores, classes, atributos, pseudoclasses e elementos.
- Consulte a pontuação numérica final para comparar o peso relativo com outros seletores.
Exemplos
- Ao introduzir #cabecalho, o painel indica a contagem de um identificador na primeira posição e uma pontuação ponderada de 1000.
- Ao submeter .menu > li:first-child, a ferramenta contabiliza a classe, a pseudoclasse e o elemento, apresentando a respetiva pontuação global.
Perguntas frequentes
O seletor universal influencia a pontuação de especificidade?
O seletor universal não adiciona qualquer valor aos componentes calculados nem altera a pontuação final.
Como é calculada a pontuação numérica total?
A pontuação pondera os quatro componentes com os multiplicadores 1000, 100, 10 e 1, somando os valores obtidos para refletir o peso do seletor.
O que acontece quando o campo de entrada fica vazio?
Se não for inserido texto ou se existirem apenas espaços, o resultado apresenta todos os componentes com o valor zero e uma pontuação nula.
Os seletores de atributos e as pseudoclasses são contabilizados juntos?
Ambos os tipos de seletores contribuem diretamente para o segundo componente de especificidade na contagem realizada pela ferramenta.