Реклама мешает? Идти Без рекламы Сегодня 

Расчет специфичности CSS

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Расчет специфичности CSS

Калькулятор специфичности CSS помогает определить точную оценку специфичности любого CSS-выборщика. Понимание специфичности критически важно для отладки конфликтов CSS и написания поддерживаемых стилевых таблиц. Введите один или несколько выборщиков и мгновенно увидите их (a,b,c) оценки, сравнивая их друг с другом.

Как использовать

Введите один CSS-выборщик на строку в поле ввода. Программа автоматически рассчитает и отобразит оценку специфичности каждого выборщика. При вводе нескольких выборщиков тот, у которого наибольшая специфичность, будет выделен зелёным цветом, чтобы вы могли быстро определить, какой из правил выигрывает.

Возможности

Соответствие W3C – Рассчитывает специфичность с помощью официального алгоритма (a,b,c): идентификаторы, классы/атрибуты/псевдоклассы и элементы/псевдоэлементы.
Сравнение нескольких выборщиков – Введите несколько выборщиков, чтобы сравнить их оценки специфичности и увидеть, какой из них выигрывает.
Уровень 4 CSS Выборок – Поддерживает современные псевдоклассы, такие как :is(), :not(), :has() и :where(), с корректной обработкой специфичности.
Визуальное отображение оценки – Цветные метки и пропорциональные бары делают понимание специфичности простым и быстрым.
Обработка на стороне клиента – Все расчёты происходят в вашем браузере. Данные не отправляются на сервер.

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Что такое специфичность CSS и как она рассчитывается?

Специфичность CSS — это система весов, которая определяет, какой из CSS-правил применяется, когда несколько правил целенаправленно воздействуют на один элемент. Она рассчитывается как трёхкомпонентная оценка (a,b,c): a подсчитывает выборники идентификаторов, b — выборники классов, атрибутов и псевдоклассов, а c — выборники типов и псевдоэлементов. Более высокая оценка в более раннем положении всегда выигрывает, независимо от позиций позже.
Как влияют псевдоклассы :is(), :not() и :has() на специфичность?

Согласно CSS Выборкам уровня 4, специфичность псевдоклассов :is(), :not() и :has() равна специфичности самого специфичного выборщика в их списке аргументов. Например, :is(.foo, #bar) имеет специфичность #bar (1,0,0), поскольку это самый специфичный аргумент. Псевдокласс :where() является исключением — он всегда вносит ноль специфичности.
Имеет ли значение порядок CSS-правил при равной специфичности?

Да. Когда два выборщика имеют идентичные оценки специфичности, применяется правило каскада CSS: правило, которое появляется позже в исходном коде, выигрывает. Именно поэтому понимание специфичности важно — полагаться исключительно на порядок исходного кода может привести к уязвимым стилям, которые ломаются при перестановке правил.
Почему выборник ID превосходит несколько выборников классов?

Алгоритм специфичности сравнивает оценки позиционно слева направо. Выборник ID имеет оценку (1,0,0), в то время как любое количество выборников классов увеличивает только вторую позицию. Поскольку позиция a сравнивается до позиции b, даже один выборник ID всегда будет превосходить любое количество выборников классов, атрибутов или псевдоклассов, независимо от их количества.