:visited伪类仅允许设置color、background-color(纯色)、border-color、outline-color、column-rule-color及SVG的fill/stroke;必须与:link等按LVHA顺序声明;JS无法检测其状态。

已访问链接的样式可以通过 CSS 的 :visited 伪类来设置,但出于隐私保护限制,现代浏览器对它的可用样式属性做了严格约束。
哪些样式可以用于 :visited
为防止网站通过样式探测用户浏览历史,浏览器只允许对 :visited 应用以下有限的 CSS 属性:
- color(文字颜色)
- background-color(背景色,仅限于非渐变、非图片的纯色)
- border-color(边框颜色)
- outline-color(轮廓颜色)
- column-rule-color(多列分隔线颜色)
- fill 和 stroke(SVG 中的颜色属性)
其他如 font-size、display、width、height、visibility、transform 等均被忽略,设置也无效。
:visited 必须与 :link 配合使用
单独写 a:visited 可能不生效,尤其当未定义基础链接状态时。推荐按标准顺序书写链接伪类:
立即学习“前端免费学习笔记(深入)”;
a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #004085; }
这个顺序(LVHA)能避免样式覆盖问题,确保 :visited 在未悬停/未点击时正常显示。
不能通过 JS 获取或判断 :visited 状态
出于安全考虑,JavaScript 无法读取元素是否匹配 :visited,也不能通过 getComputedStyle() 获取其颜色值(会返回未访问时的值)。任何试图探测用户历史的行为都会被浏览器阻止。
实际应用建议
利用限制内的属性做简洁区分即可,例如:
- 让已访问链接文字变灰:
a:visited { color: #999; } - 加下划线并改变背景色(浅色底):
a:visited { background-color: #f8f9fa; text-decoration: underline; } - 配合图标变化(需 SVG 内联且用
fill控制):a:visited svg { fill: #6c757d; }
避免依赖 :visited 实现关键交互逻辑,它更适合辅助性视觉提示。










