a11y.skipToMainContent
1

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

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

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Specificity Calculator

  1. Вставьте один или несколько селекторов CSS в поле ввода (по одному на линию).
  2. Специфика каждого селектора показана как тройка (a,b,c) с разбивкой идентификаторов, классов и элементов.
  3. Когда вы вводите несколько селекторов, победитель выделяется зеленым знаком «WINS».
  4. Используйте диаграмму баров для визуального сравнения специфичности всех селекторов.
  5. Редактируйте любой селектор и смотрите обновление результатов в режиме реального времени.

Что такое имя?

Специфика CSS определяет, какие стили применяются, когда несколько правил нацелены на один и тот же элемент. Он вычисляется как трехкомпонентное значение (a, b, c), где «a» считает идентификаторы, «b» считает классы / атрибуты / псевдоклассы и «c» считает элементы / псевдоэлементы. Более высокие значения выигрывают, причем «а» является наиболее значительным. Этот инструмент анализирует ваши селекторы и мгновенно разрушает их специфичность. Вставьте несколько селекторов (по одному на линию), и инструмент выделит победителя. Он правильно обрабатывает современные псевдоклассы CSS, такие как :is(), :not(), :has() и :where() в соответствии со спецификацией CSS Selectors Level 4
Advertisement

FAQ

Что означают числа (a,b,c)?
Три числа представляют собой: a = количество селекторов ID (#id), b = количество классов (.class), атрибутов ([attr]) и псевдоклассов (:hover), c = количество имен элементов (div, p) и псевдоэлементов (:::fore). Встроенный стиль бьет всех; !важно бьет все, кроме другого !важно.
Как работают :is() и :not() спецификации?
Согласно спецификации CSS Selectors Level 4, :is() и :not() учитывают специфику их наиболее конкретного аргумента. Например, :is(#id, .class) имеет специфичность (1,0,0) — высшую среди своих аргументов. Работает (работает) одинаково. где () всегда вносит свой вклад (0,0,0) независимо от его аргументов.
А как же !важно?
Важные декларации преобладают над обычными, независимо от специфики. Когда два важных заявления противоречат друг другу, для разрыва галстука используется специфика. Этот инструмент вычисляет только специфичность базового селектора — он не учитывает важность.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Specificity Calculator on Wikipedia·Developer Tools on Wikipedia·CSS Specificity Calculator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement