Разное

Посещенная ссылка css: Как установить цвет посещённой ссылки?

02.06.2023

html — Почему ссылки сразу помечены как посещённые?

Вопрос задан

Изменён 4 года 4 месяца назад

Просмотрен 341 раз

Ссылки первоначально помечаются не зелёным, а красным. И при переходе на них, ничего не меняется (т.е. по всей видимости они первоначально отображаются на странице, как те ссылки, по которым уже перешли).

<html>
     <head>
      <meta charset="utf-8"/>
      <style type="text/css">
      a:link {
       color: green;
       text-decoration: none;
      }
       a:visited {
        color: red;
        text-decoration: none;
       }
       .decor {
        color: red;
       }
      </style>
     </head>
     <body>
      <h2>Породы собак: <span>Б</span></h2>
      <ul>
       <li><a href="https://www.
 
 youtube.com">Бассет-хаунд</a></li>
       <li><a href="https://www.youtube.com">Бедлингтон-терьер</a></li>
       <li><a href="https://www.youtube.com">Бельгийская овчарка</a></li>
       <li><a href="https://www.youtube.com">Бигль</a></li>
       <li><a href="https://www.youtube.com">Борзая русская псовая</a></li>
       <li><a href="https://www.youtube.com">Бриар</a></li>
      </ul>
     </body>
    </html>
  • html
  • css
  • вёрстка
  • ссылки
3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Состояния ссылок на CSS | Трепачёв Дмитрий

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

К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание. Конструкция

:hover называется псевдоклассом. Псевдоклассы позволяют отлавливать разные состояния элементов.

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

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

a:link { color: red; } a:visited { color: green; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

Нюансы

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния :link, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Сделайте все ссылки в состоянии :hover красными и неподчеркнутыми, в состоянии

:link — голубыми, в состоянии :visited — зелеными, в состоянии :active — черными.

Состояния link и visited

Часто состояния :link и :visited объединяют вместе через запятую:

a:link, a:visited { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }<a href="#">ссылка</a>

:

В таком случае можно их вообще и не указывать:

a { color: red; } a:hover { text-decoration: none; } a:active { color: blue; }
<a href="#">ссылка</a>

:

Обычное использование

Как правило, указываются состояния для всех типов ссылок одновременно, а потом ниже добавляются особенности поведения ссылки при наведении мышкой, вот так:

a { color: red; } a:hover { text-decoration: none; }<a href="#">ссылка</a>

:

Сделайте все ссылки во всех состояниях голубыми и неподчеркнутыми, а в состоянии :hover — красными и подчеркнутыми.

: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 , layout-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 35 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.

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

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