A visited: Псевдокласс :visited | htmlbook.ru

Leave a Comment / Разное / By /

:visited ⚡️ HTML и CSS с примерами кода

Псевдокласс :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 наврёт и всегда будет давать значение цвета непосещённых ссылок.

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

a:visited {
  /* . .. */
}

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

  • HTML Living Standard
  • Selectors Level 4
  • Selectors Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Пример

<!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>

См. также

  • :link
  • :active
  • :hover

Ссылки

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

Псевдокласс :visited | CSS | WebReference

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

Синтаксис

a:visited  {  ...  }
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!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>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :visited

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

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

3.51213.
5		11
1141
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

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

См. также

  • Виды ссылок
  • Псевдоклассы в CSS
  • Типы ссылок

Рецепты

  • Как задать цвет посещённых ссылок?

Практика

  • Посещённая ссылка

Справочник CSS

Значения свойств

Функции

Единицы CSS

Типы элементов

@-правила

Анимация

Границы

Контент

Логические

Отступы и поля

Печать

Позиционирование

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

Псевдоэлементы

Размеры

Списки

Таблицы

Текст и шрифт

Флексы

Форматирование

Формы

Цвет и фон

:visited — CSS: каскадные таблицы стилей

Псевдокласс CSS :visited применяется после того, как пользователь посетил ссылку.

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

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

:link псевдоклассы являются взаимоисключающими.

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

  • Допустимые свойства CSS: color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top-color , column-rule-color , контур-цвет , text-decoration-color и text-emphasis-color .
  • Допустимые атрибуты SVG: заливка и штрих .
  • Альфа-компонент разрешенных стилей будет игнорироваться. Вместо этого будет использоваться альфа-компонент состояния элемента, отличного от
    :visited     . В Firefox, когда альфа-компонент равен 0 , стиль, установленный в :visited , будет полностью игнорироваться.
  • Хотя эти стили могут изменить внешний вид цветов для конечного пользователя, Метод window.getComputedStyle будет лгать и всегда будет возвращать значение цвета, отличного от :visited .
  • Элемент никогда не совпадает с элементом :visited .

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

 :посетил {
  /* ... */
}

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

HTML 

 Вы уже посещали эту ссылку?

Вы уже посещали эту ссылку.

УСБ 

 а {
  /* Укажите непрозрачные значения по умолчанию для некоторых свойств,
     позволяя им быть оформленными с состоянием :visited */
  цвет фона: белый;
  граница: 1px сплошной белый;
}
а: посетил {
  цвет фона: желтый;
  цвет границы: ярко-розовый;
  цвет: ярко-розовый;
}

Результат

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

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

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

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

CSS :visited Selector

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Выбор и оформление посещенных ссылок:

a:посетили {
цвет: розовый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор :visited используется для выбора посещенных ссылок.

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :hover для оформления ссылок при наведении на них курсора и :active селектор для оформления ссылок при нажатии на них.

Браузеры ограничивают стили, которые можно установить для ссылок a:visited, из-за проблемы с безопасностью.

Допустимые стили:

  • цвет
  • цвет фона
  • цвет границы (и цвет границы для отдельных сторон)
  • цвет контура
  • цвет правила столбца
  • цветные части заливки и обводки

Все остальные стили наследуются от ссылки.

Версия: CSS1

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:посетили 4,0 7,0 2,0 3. 1 9,6

Синтаксис CSS

:visited {
 объявления css ;
}

Другие примеры

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  цвет: зеленый;
}

/* посещенная ссылка */
a:посетили {
 цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
 цвет: красный;
}

/* выбранная ссылка */
a:active {
 цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a.ex1: hover, a.ex1: active {
  цвет: красный;
}

a.ex2: наведение, a.ex2: активный {
 размер шрифта: 150%;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: Ссылки CSS

Учебник CSS: Псевдоклассы CSS

❮ Предыдущая Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

903 36 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *