Developer Tools
Design ToolsКалькулятор специфичности CSS
Вставьте CSS-селекторы и мгновенно увидите их показатели специфичности рядом. Разберитесь, какие правила побеждают и почему — с рейтингом по весу.
CSS-селекторы
Быстрые примеры
Результаты специфичности
Специфичность рассчитывается как (a, b, c)
Введите CSS-селекторы выше, чтобы увидеть их оценки специфичности.
a
ID
#id
b
Классы / Атрибуты / Псевдоклассы
.class [attr] :hover
c
Элементы / Псевдоэлементы
div p ::before
Похожие инструменты
О калькуляторе специфичности CSS
Как это работает
- Введите один или несколько CSS-селекторов, по одному на строку, в поле ввода
- Инструмент анализирует каждый селектор и подсчитывает ID, классы/атрибуты/псевдоклассы и элементы
- Специфичность отображается как трёхчастная оценка: (a, b, c)
- Селекторы автоматически ранжируются от наибольшей к наименьшей специфичности
- Нажмите «Копировать результаты», чтобы скопировать таблицу специфичности в буфер обмена
- Используйте сравнение, чтобы понять, какие селекторы будут переопределять другие
Типичные сценарии использования
- Отладка проблем переопределения CSS путём сравнения весов селекторов
- Интерактивное изучение правил специфичности CSS
- Проверка селекторов перед добавлением новых стилей в таблицу
- Обучение специфичности CSS разработчиков или студентов
- Оптимизация специфичности селекторов для уменьшения использования !important
- Быстрая проверка того, какое правило побеждает при конфликте стилей
Часто задаваемые вопросы
Что такое специфичность CSS?
Специфичность CSS — это вес, присвоенный CSS-селектору, который определяет, какое правило стиля применяется, когда несколько правил соответствуют одному элементу. Она представлена трёхчастным значением (a, b, c), где a считает селекторы ID, b — класс/атрибут/псевдокласс, а c — тип элемента и псевдоэлементы.
Как рассчитывается специфичность?
Специфичность рассчитывается путём подсчёта трёх категорий в селекторе: (a) селекторы ID, например #header, (b) селекторы класса (.card), атрибутов ([type="text"]) и псевдоклассов (:hover, :nth-child), (c) селекторы типа (div, p) и псевдоэлементы (::before). Универсальный селектор (*) и комбинаторы (+, ~, >) не влияют на специфичность.
Какой селектор побеждает при конфликте двух правил?
Побеждает селектор с более высокой специфичностью. Сравните значения (a, b, c) слева направо: больше ID (a) всегда побеждает больше классов (b), а больше классов всегда побеждает больше элементов (c). При равной специфичности побеждает правило, которое стоит позже в таблице стилей.
Для чего используется числовая оценка специфичности в этом инструменте?
Числовая оценка — это упрощённое сравнимое значение (a * 10000 + b * 100 + c) для ранжирования селекторов. Не следует интерпретировать её как буквальное значение CSS — специфичность CSS не является единым числом, а представляет собой трёхчастное сравнение.
Влияет ли !important на специфичность?
!important не является частью специфичности — оно переопределяет все другие объявления независимо от специфичности. Этот инструмент рассчитывает только специфичность селектора, не учитывая эффект !important. Избегайте использования !important в продакшн CSS.
Имеет ли специфичность универсальный селектор (*)?
Нет. Универсальный селектор (*) имеет нулевую специфичность (0, 0, 0). Комбинаторы (+, >, ~, пробел) также не влияют на специфичность. Только ID, класс, атрибут, псевдокласс, элемент и псевдоэлемент увеличивают специфичность.
Как :not() влияет на специфичность?
Псевдокласс :not() сам по себе не имеет специфичности, но имеет её содержащийся в нём селектор. Например, :not(#id) вносит (1, 0, 0) в специфичность (один ID). Этот инструмент корректно учитывает :not(), анализируя аргумент внутри скобок.
В чём разница между :: и : для псевдоэлементов?
:: — современный синтаксис двойного двоеточия для псевдоэлементов (::before, ::after, ::placeholder). Устаревший синтаксис с одним двоеточием (:before, :after) всё ещё поддерживается браузерами, но является устаревшим. Оба добавляют 1 к счётчику c (элемент/псевдоэлемент).
Как встроенные стили соотносятся с селекторами?
Встроенные стили (например, style="color: red") имеют специфичность (1, 0, 0, 0) — выше любого селектора — представленную как четвёртая категория, не охваченная этим инструментом. На практике встроенные стили всегда переопределяют правила таблицы стилей (если не используется !important).
Можно ли сравнивать селекторы с одинаковой оценкой специфичности?
Да. Когда два селектора имеют одинаковые значения (a, b, c), побеждает тот, который стоит позже в исходном порядке. Этот инструмент отображает их с одинаковым рангом при идентичных оценках, и вы можете посмотреть разбивку (a, b, c) для подтверждения равнозначности.
Почему следует минимизировать специфичность в CSS?
Высокая специфичность затрудняет переопределение и поддержку стилей. Чтобы переопределить стиль, нужно написать ещё более специфичный селектор или использовать !important. Низкая специфичность делает CSS более модульным и предсказуемым, особенно в крупных проектах.
Поддерживает ли этот инструмент все типы CSS-селекторов?
Инструмент поддерживает наиболее распространённые CSS3-селекторы, включая ID, классы, атрибуты, псевдоклассы (включая :not()), псевдоэлементы и селекторы типа. Сложные современные селекторы :is(), :where(), :has() могут быть обработаны не полностью.