среда, 13 августа 2014 г.

[вёрстка] Про приоритет применения стилей 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 считаются расположенными выше стилей в самом файле.

Отправить комментарий