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

Для чего проверять CSS-селектор

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

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

Перед проверкой отделите селектор от объявления CSS. Например, для правила #header { color: navy; } вводится #header, без фигурных скобок и свойства. Сохраните исходную запись, если нужно позднее сравнить её с отображённым представлением селектора. Такой подход уменьшает риск приписать числовому баллу элементы, которые к селектору не относятся.

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

Порядок проверки и чтения результата

1. Определите селектор, который требуется проверить, и скопируйте только его текст. Подойдут записи вроде #header, .card или составное выражение с названием элемента, классом и атрибутным селектором. Не включайте фигурные скобки, свойства и значения из блока объявления.

2. Вставьте запись в поле для селектора. Дополнительная настройка для обычного расчёта не нужна: текст передаётся как необязательное значение. Если поле должно остаться пустым, учитывайте, что строка из пробелов рассматривается так же, как отсутствие содержимого.

3. Запустите расчёт доступным элементом управления и дождитесь результата. Успешный результат содержит четыре компонента специфичности, числовой балл и представление селектора. Когда ввод непустой, это представление сохраняет поданную строку, что позволяет сверить результат с исходной записью.

4. Посмотрите на компоненты по порядку. Идентификаторы относятся к первому компоненту. Классы, атрибутные селекторы и распознанные псевдоклассы увеличивают второй. Псевдоэлементы и распознанные названия элементов учитываются в третьем. Универсальный селектор не добавляет значение.

5. Для сравнения двух правил сопоставьте компоненты слева направо, затем проверьте числовые баллы. Вес первого компонента равен 1000, второго составляет 100, третьего равен 10, а четвёртого равен 1. Поэтому количество фрагментов нельзя складывать без учёта их положения.

Что означает числовой балл

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

Для строки #header проверка даёт форму [1, 0, 0, 0] и значение 1000. У .card первый компонент не получает вклад, тогда как второй содержит вклад класса. В составном выражении итог зависит от тех названий элементов, классов, атрибутов, псевдоклассов и псевдоэлементов, которые распознаны при расчёте.

Если в поле нет текста или находятся только пробелы, четыре позиции равны нулю, числовой результат также равен нулю, а представление селектора пусто. Это нельзя читать как характеристику существующего CSS-правила, поскольку инструменту не передали выражение для разбора.

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

Практический пример

Разработчик проверяет правило для элемента с идентификатором header, чтобы сопоставить его специфичность с другим правилом.

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

Для идентификаторного селектора результат содержит четыре компонента в форме [1, 0, 0, 0], числовой балл 1000 и представление переданного селектора без изменения текста.

Ограничения

• Результат отражает конструкции, которые инструмент распознаёт в переданной строке; сложный или непривычный синтаксис не даёт основания считать обработанными все его элементы.

Частые ошибки

• Причина: в поле осталась пустая строка или пробельный ввод, поэтому отображаются нулевые компоненты и пустое представление. Действие: удалите лишние пробелы, вставьте сам селектор без блока объявления и повторите расчёт.

Частые вопросы

Что произойдёт, если оставить поле селектора пустым?

Если поле пусто или содержит только пробелы, расчёт всё равно завершится успешно: четыре компонента примут нулевые значения, числовой балл будет равен нулю, а представление селектора останется пустым.

Как учитывается идентификатор в CSS-селекторе?

Если введён только идентификатор, первый компонент получает значение 1, а форма результата выглядит как [1, 0, 0, 0]. При весе первой позиции 1000 числовой балл составит 1000, если другие компоненты отсутствуют.

Учитывается ли универсальный селектор?

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