CSS специфичность и приоритет селекторов: понятное руководство с примерами
Если «стили не применяются», почти всегда виноват каскад и специфичность. В этом руководстве мы системно разберём, как CSS решает, какое правило победит, научимся считать «вес» селекторов, корректно использовать !important и современные инструменты управления каскадом: :where(), :is() и @layer.
Каскад, наследование и порядок
Как считать специфичность
Классическая модель: a-b-c-d (inline | ID | классы/атрибуты/псевдоклассы | теги/псевдоэлементы). Чем левее число больше — тем сильнее селектор.
/* Формат: inline | ID | class/attr/pseudo-class | tag/pseudo-element */
a { /* 0 | 0 | 0 | 1 */ }
.menu a.active { /* 0 | 0 | 2 | 1 */ }
#header .menu a { /* 0 | 1 | 1 | 1 */ }
/ * inline style на элементе — 1 | 0 | 0 | 0 * /
Важно: универсальный селектор * и :where() не увеличивают специфичность, а :is() принимает специфичность самого «тяжёлого» из перечисленных селекторов внутри скобок.
Пример конфликта и его разбор
<nav id='header'>
<ul class='menu'>
<li><a class='link' href='#'>Главная</a></li>
</ul>
</nav>
/* Правило 1 */
.menu a { color: #222; } /* 0|0|1|1 */
/* Правило 2 */
#header .menu .link { color: #06f; } /* 0|1|1|0 */
/* Правило 3 (идёт позже) */
.menu .link { color: #e11; } /* 0|0|2|0 */
Какой цвет будет у ссылки? Победит «Правило 2», потому что оно содержит ID (вес 0|1|1|0), а это сильнее любого количества классов из «Правила 3». Порядок в коде уже не важен — сначала сравнивается специфичность.
Наследование против специфичности
body { color: #333; } /* наследуется детьми */
.link { color: #06f; } /* перекрывает наследование */
article { font-size: 18px; } /* наследуется */
article .note { font-size: 14px; } /* локально меняем размер */
Если свойство наследуется, то любой явный селектор, даже с небольшим весом, перекроет наследуемое значение. Если не наследуется — нужно задать его на самом элементе или использовать inherit/initial/revert.
Когда (и как) можно использовать !important
.text-error { color: #e11 !important; }
/ * Лучше держать !important в контролируемых утилити-классах * /
:where() и :is(): снижаем и контролируем «вес»
:where() добавляет 0 к специфичности — удобно для базовых паттернов. :is() берёт максимальную специфичность из списка внутри скобок — удобно для краткости без потери контроля.
/* Базовое оформление любых кнопок в карточках без повышения веса */
.card :where(.btn) { padding: .5rem 1rem; border-radius: .5rem; }
/* Селектор короче, но специфичность определяется самым «тяжёлым» вариантом */
:is(h1, h2, h3).title { margin-bottom: .5rem; }
Каскадные слои (@layer): упорядочиваем стили по смыслу
@layer позволяет задать предсказуемый порядок целых групп стилей, независимо от специфичности внутри слоёв. Сначала объявляем порядок слоёв, затем пишем стили в них.
@layer reset, base, components, utilities;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
}
@layer base {
body { font: 16px/1.5 system-ui, sans-serif; }
a { color: #06f; }
}
@layer components {
.btn { background: #06f; color: #fff; }
}
@layer utilities {
.text-red { color: #e11 !important; }
}
Даже если внутри components появится селектор с высоким «весом», стили из utilities всё равно перекроют его благодаря порядку слоёв.
Типичные ошибки и как их исправить
/ * Плохо * /
#header .menu li a.link { color: #06f; }
/ * Лучше (BEM) * /
.menu__link { color: #06f; }
.menu__link--active { color: #e11; }
Отладка в DevTools
Практический чеклист
Хотите закрепить тему каскада на реальной вёрстке и получить системное понимание CSS-основ? Загляните в Практический курс «Вёрстка сайта с нуля 2.0» — от первых блоков до уверенного владения современными приёмами.
Итоги
Специфичность — это не магия, а простая математика селекторов плюс порядок в коде. Управляйте «весом» осознанно, используйте каскадные слои и современный селекторный инструментарий — и ваши стили будут применяться предсказуемо и без «битв за !important».
