Отключение смены цвета посещенных ссылок в HTML и CSS
Быстрый ответ
Если вам необходимо предотвратить изменение цвета посещённых ссылок, присвойте одинаковые стили для псевдоклассов :link
и :visited
:
a:link, a:visited {
color: blue; // Цвет ссылки всегда будет синим
}
Данный селектор устанавливает синий цвет ссылки независимо от её статуса посещения.
Важность последовательности псевдоклассов
Последовательность псевдоклассов для гиперссылок является важным условием для корректного оформления стилей в CSS. Запомните акроним — LoVe/HAte (link, visited, hover, active). Вместе они образуют такой порядок:
a:link {} // Любовь с первого клика
a:visited {} // Уже знакомы
a:hover {} // Привлекательность на высоте
a:active {} // Отношения становятся активнее
Если вам нужно, чтобы цвет посещённых ссылок вообще не менялся, просто не указывайте цвет для :visited
:
a:link, a:hover, a:active {
color: black; // Классика в черном обличии
}
Обеспечение консистентности
Чтобы обеспечить единообразие пользовательского интерфейса, используйте свойство inherit. Это гарантирует, что цвет ссылок будет соответствовать цвету их родительского элемента:
a, a:visited, a:hover, a:active {
color: inherit; // Стабильность и традиции
}
Визуализация
Для наглядности представьте гиперссылки в виде дверей (🚪):
Перед посещением: 🚪🔵 (Непройденная синяя дверь)
После посещения: 🚪🔴 (Пройденная красная дверь)
Остановим смену цвета с помощью следующего селектора:
a:visited { color: inherit; }
Теперь:
Всегда: 🚪🔵 (Дверь всегда остаётся синей)
Использование color: inherit;
для :visited
позволяет сохранить цвет двери постоянным после прохождения.
Подход с использованием цвета браузера по умолчанию
Если вы хотите использовать системный цвет без заданного значения, воспользуйтесь системными цветами:
a:visited { color: LinkText; } // Браузер знает лучше
注意: Некоторые системные цвета, такие как LinkText
, могут быть не поддержаны некоторыми браузерами. Во время использования проверяйте совместимость.
Sass и @extend
В Sass можете использовать @extend
для избежания дублирования кода. Но делайте это осторожно, чтобы избежать увеличения размера CSS-файла:
a:visited {
@extend .regular-link; // Принцип DRY в действии, заботьтесь о его соблюдении
}
Используйте @extend
с умом, чтобы поддерживать оптимальный баланс между удобством поддержки кода и его производительностью.
Полезные материалы
- :visited | CSS-Tricks – CSS-Tricks — Полное руководство по использованию псевдокласса :visited.
- :visited – CSS: Стили страниц | MDN — Официальная документация по псевдоклассу :visited от MDN.
- CSS :visited Selector — Инструкция по использованию селектора :visited.
- Selectors Level 3 — Подробная информация о спецификации CSS селекторов от W3C, включая :visited.
- CSS3 selectors | Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости CSS-селекторов с браузерами, включая псевдокласс :visited.
- The Definitive Guide To Styling Links With CSS — Smashing Magazine — Лучшие практики по стилизации гиперссылок, включая :visited.
- privacy-related changes coming to CSS :visited – Mozilla Hacks – the Web developer blog — Обсуждение вопросов приватности и изменений в обработке псевдокласса :visited браузерами.