Псевдоклассы

Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования.

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

Псевдоклассы связей

Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента 'A':

A:link { color: red } /* непосещенная связь */

A:visited { color: blue } /* посещенная связь */

A:active { color: green } /* активная связь */

A:hover { color: lime } /* связь, на которой расположен указатель мыши */

Примечание

Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01.

Внимание

Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover.

Так как псевдоклассы применяются к единственному типу элементов 'A', то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:

A:link { color: red } /* не посещенная связь */

:link { color: red } /* не посещенная связь */

Применение таблиц стилей

Как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, – какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют "каскад", по которому документ "прокатывается" и постепенно форматируется на основе правил таблиц стилей, образующих "каскад".

Говорят, что правила, определенные в таблице с большим приоритетом, имеют больший вес.

Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес.

Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей.

Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:

H1 {color: red ! important; background: white ! important}

Для определения значения комбинации элемент-свойство используется следующий механизм:

1. Ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение.

2. Определения сортируются по явно заданным весам: определения со значением 'important' имеют больший вес по сравнению с нормальным (без увеличения веса) определением.

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

4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество атрибутов ID (a), атрибутов CLASS (b) и названий тегов (c) в селекторе. Составляется число 'abc', которое и определяет специфичность данного определения. Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже:

LI {...} /* a=0 b=0 c=1 --> специфичность = 1 */

UL LI {...} /* a=0 b=0 c=2 --> специфичность = 2 */

UL OL LI {...} /* a=0 b=0 c=3 --> специфичность = 3 */

LI.red {...} /* a=0 b=1 c=1 --> специфичность = 11 */

UL OL LI.red {...} /* a=0 b=1 c=3 --> специфичность = 13 */

#x34y {...} /* a=1 b=0 c=0 --> специфичность = 100 */

5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется.

Можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с атрибутом CLASS в качестве селектора, правило с атрибутом ID в качестве селектора, встроенное в тег HTML правило.