ToolHub
Открыть инструмент

Калькулятор специфичности CSS

Расчёт и сравнение баллов специфичности CSS-селекторов с визуальной разбивкой

Инструменты разработчика
Запустить инструмент Все инструменты

Об этом инструменте

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

Основные функции

Быстрый предпросмотр

Сценарии использования

css specificity selector

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

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

Специфичность CSS — это система оценки, которая определяет, какие CSS-правила применяются, когда несколько селекторов нацелены на один элемент. Она рассчитывает вес на основе типа селектора: селекторы ID имеют наивысший вес, за ними следуют селекторы классов и атрибутов, и наконец, селекторы элементов.

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

Специфичность рассчитывается как трёхчастный балл (ID, классы, элементы). Каждый селектор ID добавляет 1 в столбец ID, каждый селектор класса, атрибута или псевдокласса добавляет 1 в столбец классов, а каждый селектор элемента или псевдоэлемента добавляет 1 в столбец элементов.

Переопределяет ли !important специфичность?

Да, объявление !important переопределяет все обычные расчёты специфичности. Когда конфликтуют несколько правил с !important, применяется правило с более высокой специфичностью. Встроенные стили также переопределяют всю специфичность на основе селекторов.

Можно ли сравнить два селектора параллельно?

Да, инструмент предоставляет панель параллельного сравнения, где вы можете ввести два селектора и мгновенно увидеть, какой из них имеет более высокую специфичность. Отметка победителя автоматически отображается рядом с селектором с более высоким баллом.

Какие типы селекторов поддерживает калькулятор?

Калькулятор поддерживает селекторы ID, селекторы классов, селекторы атрибутов, селекторы псевдоклассов (такие как :hover и :nth-child), селекторы элементов и селекторы псевдоэлементов (такие как ::before и ::after). Также предлагаются часто используемые примеры, которые можно заполнить одним нажатием.

Похожие инструменты

Валидатор JSONПалитра цветовГенератор хешейГенератор UUID