a:visited伪类必须显式声明并按LVHA顺序书写才能生效,仅支持color等有限颜色属性,内联style对其无效。

a:visited 伪类必须显式定义才能改已访问链接颜色
浏览器对已访问链接(a:visited)有严格限制:不显式写 CSS 规则,它就沿用默认色(通常是紫色),且这个默认行为无法被内联 style 覆盖。你不能靠 <a href="#" style="color: red">点我</a> 让它点完还红——点过之后立刻变回浏览器默认色。
-
a:visited必须在<style>块或外部 CSS 中单独声明,例如:a:visited { color: #666; } - 只写
a { color: blue; }不会影响已访问状态,a:visited的优先级高于普通a选择器 - 某些旧版浏览器(如 IE8 及更早)会忽略
a:visited样式,除非同时定义了a:link - 现代浏览器出于隐私考虑,
a:visited只允许设置有限的 CSS 属性(color、background-color、border-color等),不能读取或影响布局
LVHA 顺序不是建议,是生效前提
如果你写了 a:visited 却没生效,大概率是规则顺序错了。浏览器按书写顺序覆盖样式,而 :hover 和 :active 会意外覆盖 :visited ——除非你按标准 LVHA 顺序写:
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #dc3545; }
a:active { color: #28a745; }
- 漏掉
a:link可能导致a:visited不触发(部分浏览器要求 link/visited 成对出现) - 把
a:hover写在a:visited前面,悬停时会先匹配 hover 规则,再点开变成 visited,但下次悬停又回到 hover 色——视觉上像“失效” - 不要用
!important强行覆盖,它解决不了顺序逻辑问题,反而让调试更难
内联 style 对 a:visited 完全无效
这是最常踩的坑:以为加个 style="color: orange" 就能一劳永逸。实际上,style 属性只作用于元素的正常渲染态(即 a:link 或无状态时),对 :visited、:hover 这类伪类毫无影响。
- 以下写法无效:
<a href="/page" style="color: orange">页面</a>—— 点过之后仍变紫/灰 - 想局部控制某类已访问链接?得用类选择器 + 伪类组合,例如:
.nav-link:visited { color: #495057; } - 如果页面里只有几个链接要特殊处理,别偷懒写内联,宁可加 class 后统一管
已访问颜色太浅?检查对比度和可访问性
设了 a:visited { color: #ccc; } 却发现看不清,不是代码错了,而是颜色值本身有问题。深色背景上浅灰文字可读性差,屏幕阅读器或色觉障碍用户可能完全无法识别。
立即学习“前端免费学习笔记(深入)”;
- WCAG 2.1 要求文本与背景对比度至少 4.5:1(正常字号),可用工具如
axe DevTools或在线对比度检测器验证 - 避免用纯灰(
#999)配白底,改用带一点饱和度的中性色,比如#5a5a5a或hsl(0, 0%, 35%) - 别为了“风格统一”把
:link和:visited设成近似色——用户需要明确感知“这个我点过了”,否则会重复点击
a:visited 规则,且放在 LVHA 链的第二位。其余都是围绕这两条展开的细节校准。



















