01
Начните с ID
Затем сравните классы и атрибуты, после них — элементы. Даже много классов не обгонят один ID; равные значения сохраняют порядок ввода.
Инструменты для CSS-селекторов
Калькулятор специфичности CSS
Введите по одному селектору на строку. Внешние запятые разбивают список на варианты; проверка HTML по умолчанию выключена.
Калькулятор специфичности CSS
Один селектор на строку; внешние запятые разделяют варианты.
Введите селектор.
Селекторы и необязательный HTML остаются в браузере; внешние ресурсы не загружаются.
Настройки
Ввод изменился; прежний результат устарел.
Когда стиль не применяется, Калькулятор специфичности CSS помогает увидеть отдельные колонки ID, классов и элементов до правки файла. Специфичность CSS-селекторов сравнивают слева направо, а не складывают в десятичное число.
Вес селекторов CSS и совпадение с HTML — разные результаты. Сравнение CSS-селекторов на этой странице не выдаётся за окончательный вердикт каскада.
Зачем нужен Калькулятор специфичности CSS
Понятный вклад функциональных псевдоклассов
:is(#dialog, .panel) берёт самый сильный аргумент, а :where(#dialog, .panel) всегда даёт ноль. Калькулятор специфичности CSS показывает вклад частей, включая неожиданно сильный ID.
Совпадение не смешивается с весом
#missing может иметь высокий вес и не найти узлов в HTML-фрагменте; .card может найти узел при меньшем весе. Два факта видны рядом без заявления о победителе каскада.
Как читать три колонки
02
Сравните :is() и :where()
Подставьте один и тот же список аргументов. У :nth-child(... of S) к аргументу добавляется вес самой псевдокласса.
03
HTML проверяйте только при необходимости
Статичный фрагмент показывает число совпадений, но не моделирует hover, focus, псевдоэлементы и полную каскадную таблицу.
Что видно в сравнении
Разбор A-B-C
Для каждого варианта отдельно показаны ID, классы/атрибуты/псевдоклассы и элементы/псевдоэлементы с вкладом каждого фрагмента.
Списки без общего ложного балла
Внешние запятые создают отдельные варианты. Сортировка по убыванию сохраняет исходный порядок при равенстве.
Локальная проверка HTML
Необязательный фрагмент обрабатывается как инертное дерево: скрипты не запускаются, изображения и стили не загружаются.
Чего не решает этот вес
- Не выбирает итоговое правило
- Источник, важность, слой, свойство, область и порядок кода участвуют в каскаде. Здесь оценивается только текст селектора.
- Inline и !important вне тройки
- Атрибут style и !important не являются частями селектора и не добавляются к колонкам A-B-C.
- Список через запятую не имеет одного веса
- Каждая ветвь может иметь свой вес и совпасть с другим элементом. Мы показываем ветви отдельно.
- Ноль совпадений не равен нулевому весу
- Даже без подходящего узла в статичном HTML специфичность сохраняется. Hover, focus и отображение псевдоэлементов не моделируются.
Вопросы про Калькулятор специфичности CSS
Как оцениваются :not() и :is()?
Они получают специфичность самого сильного аргумента. Само имя функции не добавляет отдельный балл.
А :where() и универсальный селектор?
И :where(), и универсальный * добавляют ноль, хотя могут совпадать с элементами.
Инлайн-стиль или !important тут показываются?
Нет. Inline-стиль и !important относятся к другим шагам каскада; эта страница считает только селекторы.
Можно сравнить пачку, а не только два?
Можно ввести несколько строк или ветвей через запятую. Каждый вариант получает отдельную тройку A-B-C.
Как считается вес селектора?
ID записываются в первую колонку, классы, атрибуты и псевдоклассы — во вторую, типы и псевдоэлементы — в третью.
Нашли ошибку в весе селектора?
Откройте Калькулятор специфичности CSS
Сравните селекторы, затем при необходимости проверьте совпадение с HTML. Калькулятор специфичности CSS разделяет эти результаты.