Оглавление

Селекторы псевдоклассов для ссылок

HTML предлагает гораздо более широкие возможности для форматирования ссылок (создаваемых с помощью элемента a или якоря) по сравнению с остальными элементами. С помощью CSS можно задавать стиль отображения ссылок в зависимости от их состояния – посещенных или непосещенных – при наведении на них указателя мыши или при щелчке по ней. Рассмотрим следующий пример:


a:link    { color: #0000FF; }
a:visited { color: #FF00FF; }
a:hover   { color: #00CCFF; }
a:active  { color: #FF0000; }

Приведенный выше код содержит четыре определения стилей CSS. При этом с каждым из селекторов используется так называемый псевдо- класс элемента a. Псевдокласс по сути является ярлыком из набора, который может быть добавлен к селектору для указания на состояние соответствующего элемента. Между селектором и псевдоклассом ставится двоеточие (:). Ниже представлены широко используемые псевдоклассы для ссылок:
• :link распространяет свое действие исключительно на непосещенные ссылки и задает для них синий цвет шрифта.
• :visited действует на посещенные ссылки и выводит их в фиолетовом цвете.
• :hover окрашивает ссылки в светло-голубой цвет при наведении на них указателя мыши вне зависимости от того, были они посещены или нет.
• :active изменяет цвет ссылки на красный после щелчка по ней.

 

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

 

Состояния :hover и :active формально называют динамическими селекторами псевдоклассов, поскольку они появляются только при взаимодействии пользователя с соответствующими элементами путем наведения указателя мыши и щелчка по ссылке соответственно.

Примечание
Применение :hover с другими элементами. Динамический селектор псевдокласса :hover, помимо ссылок, можно использовать с другими элементами, что позволяет создавать эффекты вроде подсветки ряда таблицы при наведении на него указателя мыши. Однако Internet Explorer 6  и более ранние версии поддерживают использование данного псевдокласса исключительно с элементами ссылок.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити