Калькулятор специфичности CSS: сравнение оценок
Вставьте по одному селектору CSS на строку, чтобы вычислить его специфичность как оценку (a, b, c). ID учитываются в a, классы, атрибуты и псевдоклассы — в b, а элементы и псевдоэлементы — в c. :where() не добавляет специфичности, а :is(), :not() и :has() используют наивысшую специфичность своих аргументов. Сортируйте оценки для сравнения селекторов.
Калькулятор специфичности CSS — это браузерный инструмент для вычисления и сравнения специфичности селекторов CSS. Введите по одному селектору на строку, чтобы увидеть его оценку как (a, b, c), затем отсортируйте результаты для сравнения веса селекторов. Он полезен, когда нужен более ясный вид того, почему один селектор может иметь приоритет над другим.
Калькулятор следует группам специфичности: ID вносят вклад в a, классы, атрибуты и псевдоклассы — в b, а элементы и псевдоэлементы — в c. Важны специальные правила псевдоклассов: :where() ничего не вносит, а :is(), :not() и :has() берут максимальную специфичность своих аргументов. Инструмент также предоставляет настраиваемые параметры, хотя в доступном описании их отдельные настройки не указаны.
Селекторы CSS описывают, к каким элементам применяются правила, а специфичность даёт способ сравнить вес селекторов. Вычисление этого веса помогает при просмотре стилей или исследовании конкурирующих правил. Сортировка оценок упрощает сравнение нескольких селекторов с первого взгляда, включая селекторы с разными видами компонентов.
Калькулятор специфичности CSS работает полностью в вашем браузере. Ваш ввод обрабатывается на вашем устройстве и не загружается, не сохраняется и не отправляется на сервер. После загрузки страницы инструмент работает офлайн, так что вы можете использовать его без сетевого соединения.
Калькулятор помогает разработчикам и DevOps-инженерам, работающим с CSS, — от изучающих подсчёт специфичности до опытных пользователей, проверяющих таблицу стилей. Он работает в браузере без необходимости локальной установки.
Шаг 1: Вставьте или введите селекторы CSS — по одному на строку. Калькулятор возвращает отдельную оценку специфичности для каждого.
Шаг 2: Просмотрите доступные параметры и настройте их при необходимости. В описании инструмента не указаны отдельные настройки параметров.
Шаг 3: Проверьте каждый результат как оценку (a, b, c): ID вносят вклад в a, классы, атрибуты и псевдоклассы — в b, а элементы и псевдоэлементы — в c.
Шаг 4: Отсортируйте результаты по оценке, чтобы сравнить специфичность селекторов и выяснить, какое правило может иметь приоритет.
Шаг 5: Скопируйте результат для использования в заметках или проверке CSS.
Пример использования: Проверяйте специфичность селекторов при отладке правил CSS, которые, кажется, перекрывают друг друга. Сравнение оценок помогает заметить, когда у одного селектора специфичность выше.
Пример использования: Просматривайте таблицу стилей при рефакторинге и сравнивайте селекторы перед изменением их структуры. Калькулятор делает оценку (a, b, c) каждого селектора легко изучаемой.
Пример использования: Поймите, как ID, классы, атрибуты, псевдоклассы, элементы и псевдоэлементы вносят вклад в специфичность, не вычисляя каждую оценку вручную.
Пример использования: Сравните селекторы, использующие :is(), :not() или :has(). Калькулятор применяет максимальную специфичность аргументов каждого псевдокласса.
Пример использования: Проверьте эффект :where() в селекторе. Он не вносит специфичности — это полезно проверить при изучении CSS.
Пример использования: Выполните проверку специфичности CSS без установки локального инструмента. Откройте калькулятор в браузере на используемом компьютере.
Пример использования: Просматривайте селекторы с внутренними деталями проекта, не загружая их в сторонний сервис. Ввод обрабатывается в вашем браузере.