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

Все рассмотренные до сих пор значения специфичности начинались с нуля, и вы, наверное, хотите знать, зачем он вообще там нужен. Дело в том, что этот первый нуль зарезервирован для встроенных объявлений стилей, специфичность которых превосходит специфичность всех остальных объявлений. Рассмотрим следующее правило и фрагмент разметки:

h1 {color: red;}

Вечеринка на лугу



Исходя из того, что это правило применяется к элементу h1, можно ожидать, что текст h1 будет зеленым. В CSS2.1 так и происходит, и объясняется это тем, что специфичность данного объявления равна 1,0,0,0. Это значит, что даже элементы с атрибутами id, которые сопоставляются с правилом, подчиняются встроенным в тег стилям. Изменим предыдущий пример и включим в него атрибут id:

h1#meadow {color: red;}

Вечеринка на лугу



В соответствии со специфичностью встроенных объявлений текст элемента h1 по прежнему будет зеленым. Приоритетность подставляемых в строку объявлений стилей является новшеством для CSS2.1 и была введена при написании CSS2.1 для фиксации поведения веб-броузера. В CSS2 специфичность подставляемого в строку объявления стиля была 1,0,0 (специфичности CSS2 составлялись из трех значений, а не из четырех). Иначе говоря, его специфичность была такой же, как и у селектора идентификатора, который при этом перекрывал встраиваемые объявления стилей.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Важность
Каскад
Наследование
Объявления и специфичность
Сортировка по порядку расположения

Вернуться в раздел: CSS / 3. Структура и каскад