Коротко: фиолетовый цвет у ссылок — это браузерный стиль для посещённых ссылок (:visited). Чтобы убрать, задайте цвет и обычной ссылке, и посещённой: a { color: ... } и a:visited { color: ... }. Иногда цвет «возвращается» из-за специфичности — тогда уточните селектор.
Почему ссылки фиолетовые
| Состояние | Стиль браузера |
|---|---|
| Обычная | синяя, подчёркнутая |
Посещённая (:visited) |
фиолетовая |
Наведение (:hover) |
обычно без изменений |
Активная (:active) |
красная |
Вкладки: как убрать
a,
a:visited {
color: #003F8F;
}
a:hover { color: #992222; }Опишите оба состояния: обычное и посещённое. Если задать только a, фиолетовый останется у уже посещённых ссылок.
a { color: inherit; text-decoration: none; }Ссылка возьмёт цвет окружающего текста — удобно для «текстовых» ссылок в статье. Но убедитесь, что их видно: сделайте подчёркивание или выделение.
a {
color: #003F8F;
text-decoration: none;
border-bottom: 1px solid rgba(0,63,143,.35);
}
a:hover { border-bottom-color: #003F8F; }Подчёркивание через border-bottom выглядит аккуратнее и позволяет анимировать. Только не убирайте признак ссылки совсем — иначе пользователь не поймёт, что можно кликнуть.
Если цвет не меняется:
- проверьте специфичность — возможно, есть правило
.content aили#main a; - посмотрите в DevTools, какое правило победило и из какого файла;
- проверьте, не задан ли цвет инлайн-стилем в контенте;
- убедитесь, что вы описали
:visited; - в крайнем случае — уточните селектор, а не ставьте
!important.
:visited: разрешены только color, background-color, text-decoration-color и border-color. Размеры и содержимое менять нельзя.Практика: единый стиль ссылок
- Задайте базовый стиль для
a. - Задайте тот же цвет для
a:visited. - Опишите
:hoverи:focus-visible. - Проверьте в DevTools, что правила применились.
- Проверьте контраст и заметность ссылок на фоне текста.
- Правки внесите в «Дополнительные стили» или дочернюю тему.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Фиолетовый остался | не описан :visited |
добавить правило |
| Цвет «не тот» | более сильный селектор | уточнить или смотреть DevTools |
| Ссылки не видно | убрали подчёркивание и цвет совпал с текстом | вернуть подчёркивание/акцент |
| Правки слетели | правили тему напрямую | дочерняя тема / доп. стили |
Проверьте себя
Вопросы и ответы
Это стандарт для удобства: пользователь видит, где уже был. Если дизайн требует единства — меняйте, но следите, чтобы ссылки оставались заметными.
Ограничение приватности: иначе сайт мог бы «узнавать» историю посещений пользователя через стили.
«Внешний вид» → «Настроить» → «Дополнительные стили», либо в CSS дочерней темы.
Обычно нет. !important ломает каскад и создаёт проблемы дальше. Лучше уточнить селектор и разобраться со специфичностью.
Итоги
- Фиолетовый — это стиль
:visited. - Задавайте цвет и для
a, и дляa:visited. - Если не работает — проверьте специфичность в DevTools.
- Ссылки должны оставаться заметными для пользователя.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.