浏览器禁用:visited多数样式能力是为防止通过样式侧信道探测用户历史访问，仅允许color、background-color（纯色）、border-color等极少数无泄漏风险的颜色类属性，其他如background-image、transform、transition等一律被静默忽略。
为什么浏览器主动禁用:visited的多数样式能力
这不是 CSS 规范没写全，而是现代浏览器（Chrome 136+、Firefox、Safari）强制执行的隐私安全策略——防止网站通过样式探测用户访问历史。2017 年起主流浏览器就已全面落地该限制，2025 年 Chrome 136 还追加了“已访问链接分区”机制，进一步隔离跨站历史状态。
:visited真正能改的属性有哪些
仅限以下颜色类属性，且必须用具体值（不能用 inherit、currentcolor、transparent 或带 alpha 的 rgba()）：
-
color（文字色，如#666） -
background-color（仅纯色，linear-gradient和url()被静默忽略） -
border-color（含border-top-color等子属性） -
outline-color、column-rule-color -
text-decoration-color、text-emphasis-color -
fill和stroke（仅对内联 SVG 中带href的元素生效）
所有其他属性，包括 font-weight、display、transform、opacity（中间值不可靠）、transition（哪怕只写 transition: color 也常被丢弃）、background-image、text-shadow，全部被浏览器直接忽略，不报错、不触发重排。
常见失效原因不是代码写错了
即使语法完全正确，:visited 也可能不生效，因为：
- 链接地址含查询参数（
/article?id=1和/article?id=2被视为两个 URL） - 页面用
file://协议打开（所有现代浏览器默认禁用:visited） - 目标页是 HTTP，而当前页是 HTTPS（部分浏览器不记录跨协议访问）
-
a:visited前面写了更高权重的选择器（如a[href^="https"]），覆盖了它 - 没同时声明
a:link，导致浏览器回退到默认样式逻辑，:visited失效 - 用了
javascript:void(0)或空href，这类链接不进入浏览历史
调试时可右键链接 → “Force state” → 勾选 :visited 强制触发（DevTools 中仅用于验证，不代表真实环境行为）。
为什么 JavaScript 也读不到真实状态
浏览器不仅限制样式，还彻底封死脚本探测路径：
-
getComputedStyle(el).color永远返回:link的值，而非实际设置的:visited颜色 -
el.matches(':visited')在 Chrome/Firefox 中已废弃，始终返回false - 任何试图通过布局差异（如
offsetWidth）、伪元素渲染、或动态注入样式来反推的方案，均被侧信道防御机制拦截
真正难的不是让颜色变灰，而是接受：这个限制不可绕过，也不该绕过。设计上适配白名单属性，比花时间找“兼容 hack”更可靠。复杂状态区分（比如图标、动画、多级访问标记）必须交由 localStorage、服务端标记或 SPA 的 history 监听来实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
