浏览器主动拒绝：:visited仅允许color、background-color等纯色属性，且须满足file://禁用、url完全一致、无!important、lvha顺序等隐私安全条件，否则整条规则静默丢弃。
不是你写错了，而是浏览器主动拒绝——:visited 的 color 和 background-color 本身就能改，但必须满足隐私安全的硬性条件，否则整条规则会被静默丢弃。
为什么 a:visited { color: #666; } 有时完全没反应
常见“无效”不是语法问题，而是浏览器根本没触发匹配：
- 本地用
file://协议打开 HTML → 多数浏览器直接禁用:visited，必须起 HTTP 服务（如python3 -m http.server） - 链接 URL 带不同查询参数，比如
/post?id=1和/post?id=2→ 浏览器视为两个独立链接，互不影响访问状态 - 写了
a:visited { color: #666; }，但漏了a:link→ 未访问链接用浏览器默认色（通常是蓝色），视觉上“没变化” - 用了内联样式
style="color:red"→ 优先级高于伪类，:visited完全不生效 - 选择器权重太高，比如
.nav a:visited，但实际链接没加class="nav"→ 规则根本不匹配
background-color 看似写了却没变色，其实是被浏览器拦截了
:visited 允许设 background-color，但仅限“无泄漏风险”的纯色值：
- ✅
#666、rgb(102, 102, 102)、darkgray—— 安全，能生效 - ❌
rgba(102, 102, 102, 0.8)—— 透明度被禁，整条声明被忽略 - ❌
currentColor或hsl(240, 50%, 50%)—— 动态或非标准色值不被允许 - ❌
background: linear-gradient(...)—— 所有background相关属性（含渐变、图片）全部静默失效
DevTools 里能看到该行被划掉，不是 CSS 解析失败，是浏览器明确拒绝应用。
为什么 !important 一加，:visited 就彻底失效
这不是 bug，是规范强制行为：只要 :visited 规则里出现 !important，整条规则会被浏览器直接忽略，不管它改的是 color 还是 background-color。
- 错误写法：
a:visited { color: #666 !important; }→ 整条丢弃 - 正确写法：
a:visited { color: #666; }→ 只靠层叠顺序和选择器权重控制优先级 - 如果被覆盖，应检查是否
a:hover写在了a:visited后面（违反 LVHA 顺序），或用了更具体的选择器如.menu a:visited但元素没对应 class
真正能稳定生效的替代路径只有两条
想让已访问链接有图标、粗体、背景高亮、甚至动画？别硬刚 :visited，它只负责最基础的颜色反馈：
- 前端方案：点击时存
localStorage，加载后遍历document.querySelectorAll('a[href]')，匹配已存 URL 并加class="is-visited"，再写任意 CSS - 服务端方案：模板直出
data-visited="true"或class="visited"，由后端根据用户登录态 + 历史记录判断
最容易被忽略的一点：Chrome 136+ 已启用“已访问链接分区”，同一域名下不同子路径的访问状态也可能被隔离；而所有 JS 探测（el.matches(':visited')、getComputedStyle）都返回 false —— 这不是兼容性问题，是彻底封死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
