Перейти к содержанию

:visited

Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.

Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как :link, :hover и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :visited до правила :link, но после других, определённых LVHA-порядком: :link — :visited — :hover — :active.

Warn

Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill и stroke. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосещённых ссылок вместо него (но если прозрачность - 0, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосещённых ссылок).

Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.

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

Синтаксис

1
2
3
a:visited {
  /* ... */
}

Спецификации

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>visited</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
      }
      a:visited {
        color: #900060; /* Цвет посещённых ссылок */
      }
    </style>
  </head>
  <body>
    <p><a href="page/1.html">Посещённая ссылка</a></p>
    <p><a href="page/2.html">Непосещённая ссылка</a></p>
    <p><a href="page/3.html">Непосещённая ссылка</a></p>
  </body>
</html>

См. также

Ссылки

  • Псевдо-класс :visited MDN (рус.)

Комментарии