:visited

    0
    2835

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

    Обратите внимание, что :visited выбирает только элементы <a> у которых есть атрибут href.

    Как правило, стили применяются к ссылкам в зависимости от их состояния, используя следующие псевдоклассы — :link, :visited, :hover и :active. Каждое состояние ссылки определяется своим CSS псевдоклассом.

    Псевдокласс :visited применяется исключительно к ссылкам, которые были посещены ранее.

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

    Такой порядок предпочтителен, т.к. в ином случае может возникнуть ситуация, когда один псевдокласс переопределяет стили другого и в итоге получится не то, что ожидается.

    Через какое-то время браузер может вернуть ссылки из состояния :visited в изначальное состояние :link.

    Особенности использования :visited

    Следует учитывать важное замечание при использовании псевдокласса :visited:

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

    Таким образом, в настоящее время количество правил стилей, которые можно применять для :visited ограниченно следующими: color, background-color, border-*-color, outline-color и column-rule-color.

    Из-за ограничений и особенностей появилась «аномалия», связанная с использованием background-color, цвет фона не будет применен к состоянию :visited если фактический «реальный» цвет фона не был задан в состоянии ссылки :link.

    В следующем примере background-color не будет применен к состоянию :visited.

    Если установить цвет фона, то всё будет работать нормально

    Пример

    Пример использования всех состояний ссылок для стилизации:

    Живой пример

    Демонстрация того, как работает псевдокласс :visited на ссылках:

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

    Псевдокласс :hover поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE.

    ПОДЕЛИТЬСЯ
    Предыдущая статья:only-of-type
    Следующая статьяbackground-color
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя