a:visited没变色主因是浏览器隐私限制而非优先级问题，仅color等极少数属性生效，且须严格遵循lvha顺序、使用安全颜色值（如#333），否则静默失效。
为什么写了 a:visited 却没变色？优先级只是表象
真正卡住的往往不是优先级，而是浏览器直接忽略该规则——哪怕它在样式表里写得再靠后、加了 !important，只要用了不被允许的属性或违反 LVHA 顺序，a:visited 就会静默失效。
常见假象：
- DevTools 里看到
a:visited样式被划掉 → 实际是浏览器主动禁用，不是被覆盖 - 本地
file://协议下点击无效 → 多数现代浏览器根本不记录访问历史 - 用
rgba(0, 0, 0, 0.7)或#00000080设颜色 → 透明度触发隐私限制，降级为默认色（通常是紫色）
a:visited 必须紧接 a:link 之后，且不能跳过 :hover
LVHA 不是建议，是强制解析顺序。浏览器按声明顺序匹配伪类，一旦顺序错乱，:visited 可能被 :hover 或后续规则覆盖，甚至完全不参与计算。
正确写法必须是：
code>a:link { color: #007bff; }
a:visited { color: #6c757d; }
a:hover { color: #0056b3; }
a:active { color: #004085; }
错误示例：
-
a:hover写在a:visited前 → 悬停时永远看不到已访问色 - 中间插了
a:focus或其他自定义 class → 打断 LVHA 链，:visited失效风险陡增 - 用
body a:visited这类更具体选择器压过a:link→ 浏览器拒绝应用，因违背“仅限基础伪类链”原则
哪些值会让 a:visited 被浏览器静默丢弃
不是所有合法 CSS 颜色都能用在 :visited 上。浏览器只放行“无法反推 URL”的安全子集，稍有越界就降级。
安全写法（稳）：
-
color: #333;（纯 hex） -
color: darkgray;（命名色） -
background-color: #f8f9fa;（背景色也受同样限制）
危险写法（大概率失效）：
-
color: rgba(0, 0, 0, 0.6);→ 透明度暴露访问粒度 -
color: hsl(200, 100%, 50%);→ HSL 系统可被脚本探测 -
border: 1px solid #007bff;→border-width和border-style不被允许，整条声明被忽略
验证是否真生效，别信肉眼判断
刷新页面后颜色正常，但点完再看没变？那大概率是回退缓存导致的渲染残留，不是 CSS 失效。
可靠验证步骤：
- 用本地服务器（如 VS Code Live Server）跑页面，避免
file://限制 - 点一个链接 → 切到新标签页 → 回退 → 此时才是真实“已访问”状态
- 打开 DevTools，选中该链接，在 Styles 面板搜索
:visited，确认对应规则未被划掉 - 执行
getComputedStyle(document.querySelector('a')).color，看返回值是否为你设的值
最常被忽略的一点：:visited 的颜色变化是一次性视觉提示，不是状态同步机制。跨设备、无痕窗口、协议切换（http/https）都会让它“失忆”，业务关键逻辑千万别依赖它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
