1429 подписчиков

Приоритеты стилей в CSS: Иерархия власти

СегодняСегодня

4 мин

В мире веб-разработки каскадные таблицы стилей (CSS) работают по принципу «закона джунглей»: побеждает сильнейший. Когда мы подключаем внешние файлы, пишем стили в <head> или добавляем атрибуты к тегам, браузеру приходится принимать непростое решение — какой из конфликтующих стилей применить к элементу. В этой статье мы разберем формальные правила спецификации CSS по расчету приоритета (специфичности) и каскадированию, а также развеем мифы, которые были актуальны в эпоху HTML 4.01. Базовое правило CSS звучит так: приоритет имеет стиль, определенный ближе к целевому элементу в структуре документа. Иерархия по удаленности от элемента выглядит так: Важное уточнение: Это правило работает при одинаковой специфичности селекторов. Если внешний файл содержит селектор #id .class, а внутренний — просто div, то победит внешний, потому что он более специфичен (подробнее о специфичности в другой раз, а пока краткая справка ниже). В старых книгах по HTML и CSS иногда упоминается приоритет классов на

Оглавление

1. Источник стиля: Кто ближе к телу, тот и главный
2. Каскад по классу и селекторам (Специфичность)
3. Контекст и вложенность (Специфическое окружение)

В этой статье мы разберем формальные правила спецификации CSS по расчету приоритета (специфичности) и каскадированию, а также развеем мифы, которые были актуальны в эпоху HTML 4.01.

1. Источник стиля: Кто ближе к телу, тот и главный

Базовое правило CSS звучит так: приоритет имеет стиль, определенный ближе к целевому элементу в структуре документа.

Иерархия по удаленности от элемента выглядит так:

Inline-стили (атрибут style="") — имеют наивысший приоритет среди всех способов задания стилей.
Внутренние таблицы стилей (<style> в <head>) — обладают приоритетом над внешними файлами.
Внешние таблицы (подключенные через <link>) — имеют наименьший вес среди источников.

Важное уточнение: Это правило работает при одинаковой специфичности селекторов. Если внешний файл содержит селектор #id .class, а внутренний — просто div, то победит внешний, потому что он более специфичен (подробнее о специфичности в другой раз, а пока краткая справка ниже).

2. Каскад по классу и селекторам (Специфичность)

В старых книгах по HTML и CSS иногда упоминается приоритет классов над тегами. Сегодня это правило строго формализовано в понятии «Специфичность» (Specificity).

Браузер вычисляет вес селектора как четырехзначное число (a, b, c, d):

Инлайн-стили — имеют вес 1, 0, 0, 0 (самый сильный).
ID-селекторы (#header) — имеют вес 0, 1, 0, 0.
Классы, псевдоклассы и атрибуты (.button, :hover, [type="text"]) — имеют вес 0, 0, 1, 0.
Селекторы тегов и псевдоэлементы (div, p, ::before) — имеют вес 0, 0, 0, 1.
Универсальный селектор (*) и комбинаторы (+, >, ~) — вес не имеют (0, 0, 0, 0).

Таким образом, если у вас есть конфликт:

h1 (вес 0,0,0,1)
.title (вес 0,0,1,0)

Победит класс .title, даже если он определен во внешнем файле, а стиль для h1 — внутри документа.

3. Контекст и вложенность (Специфическое окружение)

В современных терминах «специфическое окружение» означает, что чем длиннее цепочка селекторов, тем выше приоритет.

Пример:

Селектор div p (вес 0,0,0,2) перебьет селектор p (вес 0,0,0,1).
Селектор div.content p (вес 0,0,1,1) перебьет селектор div p (вес 0,0,0,2), потому что класс перевешивает любое количество тегов.

4. Правило последнего места (Порядок подключения)

Если два селектора имеют одинаковый вес (например, оба являются классами), то в игру вступает правило порядка:

Побеждает тот стиль, который объявлен позже в коде (ниже по тексту).

Это правило распространяется и на подключение файлов. Если вы подключили reset.css, а затем style.css, то стили из style.css имеют приоритет над идентичными по специфичности правилами из reset.css.

5. !important: Ядерная кнопка (Нюансы источника)

Современный CSS добавил мощный модификатор !important. Он переворачивает иерархию с ног на голову.

Стиль с !important отменяет обычную специфичность.
Однако, если два правила содержат !important, то снова вступают в силу правила ранжирования по источнику и порядку.

Иерархия с учетом !important выглядит так (от сильного к слабому):

Пользовательские стили браузера (с !important).
Стили автора (наши) с !important.
Инлайн-стили автора (без !important).
ID, Классы, Теги (по специфичности).
Стили браузера по умолчанию.

6. Битва с атрибутами HTML: Современный взгляд

В былые времена предсказать взаимодействие CSS и атрибутов тегов (вроде <font color=""> или align) было почти невозможно. В современной веб-разработке эта проблема практически устранена.

HTML5 объявил большинство презентационных атрибутов (align, bgcolor, border в тегах таблиц) устаревшими (deprecated).
Современные браузеры однозначно отдают приоритет CSS-свойствам перед устаревшими атрибутами. Если вы зададите style="text-align: center", это перекроет атрибут align="left" в любом случае.
Единственное исключение, которое сохранилось — атрибут height/width для изображений, но он влияет на геометрию до загрузки CSS, а не на приоритет стилей после загрузки.

Почему мы не используем магический кристалл?

В 2026 году стандарты W3C кристально четко описывают каскад. Если у вас возникает конфликт, вы всегда можете открыть Инспектор браузера (DevTools) — полезный “магический кристалл” веб-разработчика — он покажет, какой стиль применен, а какой перечеркнут, и объяснит, почему (указав файл и строку). Обычно для открытия Инспектора браузера используется клавиша F12 (и для закрытия тоже).