a:visited仅支持color等极少数颜色属性且须用十六进制或命名色；失效主因是lvha顺序错误、使用rgb()/hsl()等不支持值、父级样式覆盖，或浏览器隐私限制导致非颜色属性静默忽略。
直接改 a:visited 就行，但浏览器强制限制它不能影响 outline、background 等属性，且颜色值不能用 rgb() 或 hsl() 动态函数——只接受静态颜色值。
为什么已访问链接颜色改不生效
常见现象是写了 a:visited { color: #666; } 却还是紫色。原因有三：
- 样式顺序错：必须放在
a:link之后、a:hover之前，否则被覆盖（LVHA 原则） - 用了不支持的值：比如
color: rgb(102, 102, 102);在部分旧版 Chrome/Firefox 中会被忽略 - 父级样式干扰：如果外层有
.nav a { color: inherit; }，会覆盖掉a:visited
a:visited 的硬性限制有哪些
这不是 bug，是浏览器出于隐私保护做的主动限制：
- 仅允许修改
color、cursor、outline（仅 outline-color）、visibility和text-decoration（仅 text-decoration-color） -
background、border、font-size等一律无效 - 不能用
@media查询或calc()计算颜色值 - JavaScript 无法读取
getComputedStyle(el).color的已访问状态结果
怎么安全地统一控制未访问/已访问/悬停颜色
推荐写法，兼顾兼容性和可维护性：
a:link {
color: #007bff;
}
a:visited {
color: #6c757d; /* 必须是十六进制或颜色名 */
}
a:hover {
color: #0056b3;
}
a:active {
color: #004080;
}
- 所有颜色值用
#十六进制，避免rgb()或变量导致失效 - 别省略
a:link—— 某些浏览器（如 Safari）在无:link时会跳过:visited解析 - 如果要局部覆盖（比如页脚链接），用更具体的选择器：
.footer a:visited { color: #999; }
想让已访问链接有背景变化？得绕开 :visited
浏览器禁止用 :visited 改背景，但可以用其他方式模拟效果：
- 服务端记录访问状态，渲染时加 class：
<a href="/post/123" class="visited"></a>，再写a.visited { background: #f8f9fa; } - 前端用 localStorage 标记（注意跨域和隐私模式下不可用）：
localStorage.setItem('visited:/post/123', '1') - 放弃“自动识别”，改用点击后 JS 切换 class：
el.classList.add('user-visited')
真正难的不是写对样式，而是意识到 a:visited 是个被浏览器故意阉割过的伪类——它的能力边界比你看到的 CSS 规则更窄，而且不会报错，只会静默忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
