Calculadora de Especificidade CSS
Esta calculadora de especificidade CSS calcula instantaneamente o peso dos seletores para ajudar a depurar conflitos e entender porque certas regras vencem outras.
Specificity Results
How to Read Specificity
(a, b, c)where:- a = ID selectors (#id)
- b = Class selectors (.class), attribute selectors ([type="text"]), pseudo-classes (:hover)
- c = Element selectors (div, p), pseudo-elements (::before)
- Higher numbers win. Compare left to right: (1,0,0) beats (0,99,99)
Por que usar esta ferramenta
A especificidade determina quais estilos se aplicam quando varias regras miram o mesmo elemento. Esta ferramenta ajuda a localizar a causa dos conflitos.
Evite usar !important desnecessariamente; identifique e refatore a regra mais especifica.
Suporta seletores complexos com combinadores e pseudo-classes para facilitar a manutencao do CSS.