Отключение смены цвета посещенных ссылок в 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 с умом, чтобы поддерживать оптимальный баланс между удобством поддержки кода и его производительностью.

Полезные материалы

1. :visited | CSS-Tricks – CSS-Tricks — Полное руководство по использованию псевдокласса :visited.
2. :visited – CSS: Стили страниц | MDN — Официальная документация по псевдоклассу :visited от MDN.
3. CSS :visited Selector — Инструкция по использованию селектора :visited.
4. Selectors Level 3 — Подробная информация о спецификации CSS селекторов от W3C, включая :visited.
5. CSS3 selectors | Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости CSS-селекторов с браузерами, включая псевдокласс :visited.
6. The Definitive Guide To Styling Links With CSS — Smashing Magazine — Лучшие практики по стилизации гиперссылок, включая :visited.
7. privacy-related changes coming to CSS :visited – Mozilla Hacks – the Web developer blog — Обсуждение вопросов приватности и изменений в обработке псевдокласса :visited браузерами.