:visited

Псевдокласс :visited CSS псевдокласса применяется, когда пользователь посетил ссылку. По причинам конфиденциальности, стили, которые можно изменить с помощью этого селектора, очень ограничены. Псевдокласс :visited применяется только к элементам <a> и <area>, которые имеют атрибут href.

Попробуйте

Стили, определённые псевдоклассами :visited и не посещённых :link, могут быть переопределены любыми последующими псевдоклассами пользовательских действий (:hover или :active), которые имеют не меньшую специфичность. Чтобы правильно стилизовать ссылки, поместите правило :visited после правила :link но до правил :hover и :active, как определено порядком LVHA-order: :link — :visited — :hover — :active. Псевдокласс :visited и псевдокласс :link являются взаимоисключающими.

Ограничения конфиденциальности

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

Разрешённые свойства CSS — color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color и text-emphasis-color.
Разрешённые атрибуты SVG — fill и stroke.
Компонент альфа разрешённых стилей будет игнорироваться. Вместо этого будет использоваться компонент альфа элемента в его состоянии без посещения. В Firefox, когда компонент альфа равен 0, стиль, заданный в :visited будет полностью проигнорирован.
Хотя эти стили могут изменить внешний вид цвета для конечного пользователя, метод window.getComputedStyle будет ошибочным и всегда возвращать значение цвета без посещения.
Элемент <link> никогда не будет соответствовать :visited.
Методы DOM, которые соответствуют элементам с помощью CSS-селекторов, такие как querySelector() и querySelectorAll(), всегда будут возвращать пустой результат, даже если в документе есть посещённые ссылки. В случае указанных методов, это будет null или пустой NodeList, соответственно.

Примечание: Дополнительную информацию об этих ограничениях и причинах их существования см. в Разделе конфиденциальности и селектора :visited.

Синтаксис

:visited {
  /* ... */
}

Примеры

Свойства, которые в противном случае не имели бы цвета или были бы прозрачными, не могут быть изменены с помощью :visited. Из свойств, которые могут быть установлены с помощью этого псевдокласса, ваш браузер, вероятно, имеет значение по умолчанию только для color и column-rule-color. Таким образом, если вы хотите изменить другие свойства, вам нужно будет задать им базовое значение за пределами селектора :visited.

HTML

<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>

CSS

a {
  /* Specify non-transparent defaults to certain properties,
     allowing them to be styled with the :visited state */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

Результат

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

Спецификация
Стандарт HTML # selector-visited
Уровень 4 селекторов # link

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`:visited`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`not_match_link`	1	12	87	15	15	18	87	14	15	1.0	4.4
`privacy_measures`	6	12	4	15	5	18	4	14	4.2	1.0	37

См. также

Конфиденциальность и селектор :visited
Псевдоклассы, связанные со ссылками: :link, :active, :hover

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited