Калькулятор специфичности CSS
Рассчитайте специфичность CSS одного или нескольких селекторов как тройку (A, B, C) — количество ID, class/attribute/pseudo-class и type/pseudo-element — чтобы отладить, почему правило стиля не работает.
Ввод
Вывод
| Селектор | ID | Класс | Тип | Специфичность |
|---|---|---|---|---|
| No data yet | ||||
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-specificity-calculator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"selectors": "#header"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-specificity-calculator` tool (CSS Specificity Calculator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-specificity-calculator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Калькулятор специфичности CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое специфичность CSS?
Когда два правила CSS нацелены на один и тот же элемент и устанавливают одно и то же свойство, браузер должен решить, какое из них выигрывает. Этим решением является специфичность — оценка, вычисляемая на основе самого селектора, а не из того, где правило находится в таблице стилей (это имеет значение только как окончательный тайбрейк, когда специфичность одинаковая). Более специфичный селектор всегда побеждает менее специфичный, независимо от того, какое правило было написано последним.
Система (A, B, C)
Специфичность выражается тремя числами, сравниваемыми слева направо как номер версии — любое различие в A перевешивает любое различие в B, которое перевешивает любое различие в C:
- A — Селекторы ID. Каждый
#idв селекторе добавляет один. - B — классы, атрибуты и псевдоклассы. Каждый
.class,[attr]или псевдокласс типа:hoverдобавляет один. - C — типы и псевдоэлементы. Каждое имя тега (
div,a) и каждый псевдоэлемент (::before,::afterи устаревшие формы с одним двоеточием:before/:after/:first-line/:first-letter) добавляют один.
Универсальный селектор (*) и комбинаторы ( , >, +, ~) всегда дают ноль — они ограничивают то, что соответствует, а не насколько специфично соответствие. Таким образом, #header получает (1, 0, 0), .nav a:hover получает (0, 2, 1) (два класс-подобных селектора, один тип), а .btn.btn-primary — два класса на одном элементе — получает (0, 2, 0), побеждая правило с одним классом, хотя это "того же типа" селектор.
Ловушка :not() / :is() / :has()
Современный CSS вычисляет :not(), :is() и :has() по специфичности их самого специфичного аргумента, а не как плоский псевдокласс. Вместо этого, этот калькулятор использует более простую, предыдущую версию Selectors-4: каждый из них (и любой другой функциональный псевдокласс, такой как :nth-child()) считается одним псевдоклассом — плюс один к B, независимо от того, что находится в скобках. Это документированное ограничение области, а не ошибка: это упрощает парсер и точно для распространённого случая (один аргумент, не вложенный), но будет недооценивать :not(), оборачивающий что-то с ID внутри. :where() всегда получает ноль, согласно спецификации, независимо от его содержимого.
Как это использовать
Вставьте один селектор CSS на строку — такой же простой как .btn или такой же сложный как #main .content > p::before:hover. Каждая строка получит свою собственную строку с её количеством ID, класса и типа плюс объединённая оценка (A, B, C). Результаты обновляются по мере ввода.
FAQ
Почему div > p::before побеждает #main... или не побеждает? Не побеждает — ID (A) всегда перевешивает любое количество селекторов типа или псевдоэлементов (C), по определению того, как сравниваются три числа.
Имеет ли значение порядок правил, если специфичность одинакова? Да — когда два правила имеют одинаковую специфичность, то, которое появляется позже в каскаде (или было загружено позже), выигрывает. !important полностью переопределяет специфичность, а встроенные атрибуты style="" превосходят любое правило на основе селектора.
Это обрабатывает списки селекторов как .a, .b? Рассматривайте каждую группу, разделённую запятой, как отдельную строку для анализа на основе селектора — список селекторов применяет своё правило к каждому селектору независимо, и каждый может иметь разную специфичность.
Конфиденциальность
Синтаксический анализ и оценка происходят полностью в вашем браузере. Селекторы, которые вы вставляете, никогда не загружаются и не хранятся.