Сортировка по порядку расположения

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

h1 {color: red;}
h1 {color: blue;}

Значение color для всех элементов h1 документа будет blue, а не red, поскольку именно это правило стоит в таблице стилей ниже. Любое правило, содержащееся в документе и имеющее более высокий приоритет, чем импортированное правило, побеждает. Это выполняется, даже если правило является частью таблицы стилей документа, а не частью атрибута style элемента. Рассмотрим следующее:

p em {color: purple;} /* из импортированной таблицы стилей */
p em {color: gray;} /* правило, содержащееся в документе */

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


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

Принцип сортировки по порядку расположения лежит в основе рекомендуемого порядка расположения стилей ссылок. Рекомендуется выстраивать ваши стили ссылок в порядке lin-visited-hover-active или LVHA, например:

:link {color: blue;}
:visited {color: purple;}
:hover {color: red;}
:active {color: orange;}

Теперь вы знаете, что специфичность всех этих селекторов одинакова: 0,0,1,0. Поскольку все они имеют одинаковые приоритет, источник и специфичность, верх одерживает тот из них, который сопоставляется с элементом последним. При щелчке по непосещенной ссылке последняя сопоставляется с тремя правилами – :link, :hover и :active, в результате побеждает то из них, которое объявлено последним.


Исходя из порядка LVHA это будет :active, что, вероятно, и предполагалось автором. Представим на секунду, что вы решили пренебречь обычным порядком расположения и вместо этого поместили стили ваших ссылок по алфавиту. При этом получилось бы следующее:

:active {color: orange;}
:hover {color: red;}
:link {color: blue;}
:visited {color: purple;}

При таком расположении ни одна из ссылок никогда не продемонстрирует стили :hover или :active, потому что правила :link и :visited следуют после них. Каждая ссылка должна быть или посещенной, или непосещенной, так что эти стили всегда будут перекрывать правило :hover. Давайте посмотрим, что получится, если автор решит использовать порядок LVHA. При таком порядке расположения непосещенные ссылки будут получать стиль :hover, а посещенные ссылки – нет. Стиль :active будет применяться и к посещенным, и к непосещенным ссылкам:

:link {color: blue;}
:hover {color: red;}
:visited {color: purple;}
:active {color: orange;}

Конечно, подобные конфликты возникают, когда все выражения пытаются задавать одно и то же свойство. Если все выражения задают разные свойства, то порядок их расположения не имеет значения.


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

:link {font-weight: bold;}
:visited {font-style: italic;}
:hover {color: red;}
:active {background: yellow;}

Вы, возможно, уже также поняли, что порядок стилей :link и :visited не важен. Без всякого вреда можно было бы расположить стили в порядке LVHA или VLHA. Однако LVHA предпочтительнее, потому что этот порядок был рекомендован в спецификации CSS2 и еще потому, что мнемоническая схема «LoVe–HA!» получила довольно широкое распространение. (Правда, в этом есть что-то грустное.) Возможность объединения псевдоклассов устраняет эти проблемы. Следующие стили могут быть расположены в любом порядке без каких-либо негативных последствий:

:link {color: blue;}
:visited {color: purple;}
:link:hover {color: red;}
:visited:hover {color: gray;}

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

:link {color: blue;}
:visited {color: purple;}
:link:hover {color: red;}
:visited:hover {color: gray;}
:link:active {color: orange;}
:visited:active {color: silver;}

Если поместить стили для активного состояния перед стилями :hover, они будут проигнорированы. Это опять происходит из-за конфликтов специфичности. Их можно было бы избежать путем введения в последовательности большего количества псевдоклассов, например, так:

:link:hover:active {color: orange;}
:visited:hover:active {color: silver;}

Объединенные в последовательности псевдоклассы, позволяющие меньше заботиться о специфичности и порядке расположения, могли бы применяться намного чаще, если бы поддерживались Internet Explorer.

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

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

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