Проверка специфичности CSS с реальным рендерингомИспользуйте движок браузера, чтобы узнать, какое правило CSS реально победит

Почему важен реальный рендеринг, а не только теоретический расчёт?

Большинство онлайн-калькуляторов специфичности CSS просто подставляют ваш селектор в формулу и выдают число — например, #main p получает (1,0,1), а .card.active — (0,2,0). Но то, что реально решает браузер при конфликте нескольких правил, также зависит от наследования, порядка каскада, !important и того, как одно и то же свойство записано в разных правилах — всё это теоретические калькуляторы игнорируют. Этот инструмент действует иначе: он рендерит вставленные вами HTML и CSS в скрытом iframe, чтобы браузер реально применил стили, а затем считывает настоящий результат через getComputedStyle(). Вы видите то, что действительно решил браузер, а не число, посчитанное на бумаге.

Как сравниваются числа (a, b, c) — разобранный пример

Специфичность CSS записывается как три числа (a, b, c): a — количество ID-селекторов, b — селекторов классов/атрибутов/псевдоклассов, c — селекторов типов/псевдоэлементов. Сравнение похоже на сравнение цифр — у кого выше «a», тот сразу побеждает, и только при равенстве «a» сравнивается «b». Например, #main p получает (1,0,1), а .card .title.active — (0,3,0) — #main p всё равно побеждает, потому что 1 > 0 по «a», хотя у другого селектора три класса. Если специфичность полностью равна, применяется правило, объявленное позже в CSS — поэтому порядок в файле тоже важен. !important — единственное, что полностью отменяет специфичность: правило с меньшей специфичностью, но с !important, побеждает правило с большей специфичностью без него (если у обоих есть !important, снова решает специфичность).

Когда на самом деле стоит использовать этот инструмент?

Классический триггер — «я написал это правило CSS, а на экране ничего не изменилось» — обычно это значит, что другое правило с более высокой специфичностью (или с !important) его перекрывает. Вставьте конфликтующие HTML+CSS, укажите селектор нужного элемента, и инструмент выведет все подходящие правила с их специфичностью, а настоящий движок браузера скажет, какое из них реально победило — больше не нужно гадать, какой слой каскада выигрывает.

Инструмент рендерит внутри изолированного iframe без внешних шрифтов, изображений и выполнения JavaScript, и не поддерживает Shadow DOM или динамически создаваемые стили CSS-in-JS — вставляйте статичные фрагменты HTML/CSS для точного результата.