[вёрстка] Про приоритет применения стилей CSS

В каком порядке каскадные стили будут применены к тегам HTML вашей веб-страницы? Приоритет применения стилей определяется в три приёма: по источнику стиля, специфичности селектора и порядку следования стилей в файле.

Источник стиля (Origin)

Существует 3 источника стилей:

• Стили браузера, заданные по умолчанию.
• Стили, определенные пользователем. (Например, к ним относятся стили, заданные через аддон Stylish Файрфокса.)
• Стили, определённые автором страницы.

Кроме того, стили пользователя и автора могут быть обычные или важные (ключевое слово !important).

Всё вместе это образует следующую иерархию стилей:

1. Стили браузера.
2. Обычные стили пользователя.
3. Обычные стили автора.
4. Важные стили автора.
5. Важные стили пользователя.

Стили применяются в указанном порядке. То есть, обычные стили пользователя перекрывают стили браузера. Обычные стили автора перекрывают стили браузера и обычные стили пользователя. Затем вступают в действие важные стили автора. И наконец, важные стили пользователя перекрывают стили из прочих источников.

Специфичность (Specificity)

Стили из одного источника соревнуются по специфичности. Специфичность можно представить как набор из четырёх чисел: a, b, c, d. Специфичность вычисляется следующим образом:

Если стиль внёдрён в тег HTML при помощи свойства style, специфичность такого стиля считается равной 1-0-0-0.

В ином случае (то есть когда стиль задан в таблице стилей) вычисляется специфичность селектора:

• В число b записывается количество отсылок к #идентификатору тега.
• В число c записывается количество отсылок к .классам, :псевдоклассам и [атрибутам].
• В число d записывается количество отсылок к элементам и ::псевдо-элементам.

Примеры:

Внедрённый стиль: <p style="color: green"> — специфичность: 1-0-0-0.

Селектор: li:first-child h2 .title — специфичность: 0-0-2-2.

Селектор: #nav .selected > a:hover — специфичность: 0-1-2-1.

Селектор: body #content .data img:hover — специфичность: 0-1-2-2.

Селектор: div.article ul li — специфичность: 0-0-1-3

Стили сортируются по специфичности. В наших примерах это будет:

1. 0-0-1-3
2. 0-0-2-2
3. 0-1-2-1
4. 0-1-2-2
5. 1-0-0-0

Именно в таком порядке стили и будут применены. То есть, из наших стилей div.article ul li наименее специфичен (имеет наименьший приоритет). Затем идёт стиль li:first-child h2 .title. Затем — #nav .selected > a:hover. И так далее. Внедрённый в HTML-тег стиль всегда имеет максимальную специфичность.

Важное уточнение:
Псевдо-класс :not не принимает участие в подсчёте. Но селектор, находящийся внутри скобок :not() принимает участие в подсчёте. Например: .article :not(p) — специфичность 0-0-1-1.

Еще одно уточнение:
Специфичность вычисляется только для обычных стилей. Для важных стилей специфичность не играет роли. Можно считать, что специфичность важных стилей всегда максимальна.

Порядок следования стилей (order)

Если у двух стилей одинаковы источник и специфичность, в дело вступает порядок следования стилей в документе. Стиль, расположенный ниже, считается более приоритетным, т.е. перекрывает стили, расположенные выше.

Стили, импортированные директивой @import считаются расположенными выше стилей в самом файле.