Иерархия селекторов

Переклад українською: Ієрархія селекторів

Группировка

Запятые, которые разделяют селекторы, позволяют «разделять» декларации между селекторами. Правило, которое продемонстрировано ниже, указывает, что все элементы i, элементы класса «warning» и элементы с идентификатором id «important» будут подчеркнуты.

i, .warning, #important {
 text-decoration: underline;
}

Иерархия селекторов

Если правила конфликтуют:

  • Правило с более специфичным селектором идет первым
  • Если два селектора имеют одинаковый уровень специфичности, правило, которое указано позднее в документе, идет первым

Как определяется специфичность селектора

Допустим, ваши селекторы объединены в следующем порядке и те, что наверху имеют самый высокий уровень специфичности

  1. Декларации в атрибутах стиля идут без селектора и обладают самым высоким приоритетом
  2. Селекторы с атрибутом идентификатора id (например, h1#foo {}) являются следующими по важности в иерархии
  3. Селекторами с другими атрибутами (например, h1.foo и a[target]) или псевдоклассы (например, a:hover) размещаются следующими в иерархии наиболее важных
  4. Селекторы без других атрибутов кроме имени элемента (например, h1) занимают следующую строчку в иерархии наиболее важных
  5. Универсальный селектор (*) обладает наименьшим приоритетом

Для корректного определения точного значения специфичности, пройдите следующий процесс:

  1. Начните со значения 0.0.0.0
  2. Если вы найдете декларацию в атрибуте стиля, вы должны изменить первую цифру на 1, что даст вам 1.0.0.0. Тогда вы получаете самое высокое значение специфичности и необходимости в дальнейших расчетах нет
  3. Каждый раз, когда наступает условие 2, добавьте 1 ко второй цифре. Например, для ol#foo li#bar добавьте 2 (1 за каждый id), что дает вам 0.2.0.0
  4. Каждый раз как вы сталкиваетесь с третьим случаем, добавьте единицу к третьей цифре. Например, для ol#foo li#bar a[target] добавьте 1, что дает вам 0.2.1.0.
  5. Каждый раз, когда выполняется условие 4, добавьте 1 к четвертой цифре. Например, для ol#foo li#bar a[target] добавьте 3 (по одном за каждое имя элемента), что дает нам 0.2.1.3

Когда вы сравниваете специфичность двух селекторов, начните с самых больших цифр слева. Число, которое больше другого, будет более специфичным. Если они равны, идите дальше и сравнивайте следующие цифры.

Каскад

Правила стиля могут определяться веб-дизайнерами в трех различных местах:

  1. Во внедренном стиле
  2. Во внешней таблице стилей (на которую ссылается HTML-файл или которая импортируется)
  3. В строке элемента

Внедренные таблицы стилей

Внедренные таблицы стилей могут быть обнаружены в элементе стиля в верхней части HTML-страницы. Следующий код демонстрирует пример страницы со встроенной таблицей стилей:

Пример кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded Style Sheet</title>
<style type="text/css">
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
</style>
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>