Калькулятор специфичности CSS
Считает специфичность селектора.
Об этом инструменте
Калькулятор считает классическую специфичность (a,b,c) селектора, чтобы было ясно, почему одно правило перебивает другое без открытия DevTools. Учитывается только сам селектор, без порядка файлов и @layer.
Как пользоваться
Введите или вставьте селектор, запустите расчёт и посмотрите распределение по идентификаторам, классам и элементам. Чем ниже значения, тем проще переопределять правило позже.
Пример
В примере селектор сочетает элементы и классы, как в старом CSS навигации.
Ввод
nav.site-header .menu a.activeВывод
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2Совет
Если !important требуется постоянно, настоящая проблема — накопленный долг по специфичности.
Полезно знать
Как считается специфичность?
Учитываются три группы: ID, затем классы, атрибуты и псевдоклассы, затем элементы и псевдоэлементы. Результат показывается как (a,b,c) и сравнивается слева направо.
Учитываются ли здесь !important и инлайн-стили?
Нет. Они лежат вне селектора и не входят в оценку (a,b,c). Инлайн-стиль или !important побеждают любую специфичность селектора.