В каком порядке каскадные стили будут применены к тегам HTML вашей веб-страницы? Приоритет применения стилей определяется в три приёма: по источнику стиля, специфичности селектора и порядку следования стилей в файле.
Источник стиля (Origin)
Существует 3 источника стилей:
- Стили браузера, заданные по умолчанию.
- Стили, определенные пользователем. (Например, к ним относятся стили, заданные через аддон Stylish Файрфокса.)
- Стили, определённые автором страницы.
Кроме того, стили пользователя и автора могут быть обычные или важные (ключевое слово !important).
Всё вместе это образует следующую иерархию стилей:
- Стили браузера.
- Обычные стили пользователя.
- Обычные стили автора.
- Важные стили автора.
- Важные стили пользователя.
Стили применяются в указанном порядке. То есть, обычные стили пользователя перекрывают стили браузера. Обычные стили автора перекрывают стили браузера и обычные стили пользователя. Затем вступают в действие важные стили автора. И наконец, важные стили пользователя перекрывают стили из прочих источников.
Специфичность (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
Стили сортируются по специфичности. В наших примерах это будет:
- 0-0-1-3
- 0-0-2-2
- 0-1-2-1
- 0-1-2-2
- 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 считаются расположенными выше стилей в самом файле.