Загрузка...
Загрузка...
Нашли ошибку в reChecker? Опишите, что произошло, и укажите адрес страницы. Оставьте email или телефон — ответим после проверки.
Вычислите специфичность CSS-селекторов и узнайте, какой стиль победит при конфликте
#header#nav#logo.menu[type="text"]:hover:nth-child(2)divp::before::afterВажно: специфичность не переносится между разрядами. 11 классов не перекроют один ID.
!important полностью игнорирует специфичность и имеет наивысший приоритет.
:where() всегда имеет специфичность 0-0-0, а :not() берёт специфичность своего аргумента.
Калькулятор специфичности CSS-селекторов. Введите один или несколько селекторов — инструмент вычислит их вес по правилам каскада (a, b, c) и покажет, какой стиль применится при конфликте. Полезно для отладки и изучения приоритетов CSS.
Расчёт специфичности (a, b, c) по стандарту CSS
Сравнение нескольких селекторов одновременно
Визуальные бары и цветовая кодировка результатов
Определение «победителя» при конфликте стилей
Поддержка :not(), :where(), ::before и других псевдоклассов
Работает полностью в браузере, без отправки данных на сервер
Три числа (a, b, c): a — количество ID-селекторов (#id), b — количество классов (.class), атрибутов ([attr]) и псевдоклассов (:hover), c — количество элементов (div, p) и псевдоэлементов (::before). Сравнение идёт слева направо: (1,0,0) побеждает (0,10,0).
Руководства и советы по теме