浏览器限制 :visited 可修改的样式属性是出于安全考虑，防止通过样式探测用户历史访问记录；仅允许 color、background-color 等极少数属性，其他如 display、font-size 等一律忽略，且 !important 无效。
为什么 :visited 样式看起来“不生效”
不是 CSS 写错了，而是浏览器主动限制了 :visited 可修改的样式属性。这是安全机制——防止脚本通过样式探测用户历史访问记录。从 Chrome 16、Firefox 4 开始，:visited 只允许设置极少数属性，比如：color、background-color、border-color（含各方向）、outline-color，以及部分 text-decoration-color 和 column-rule-color。其他如 display、visibility、font-size、padding、height 等一律被忽略，连 !important 都无效。
:visited 的颜色优先级怎么算
即使只改颜色，也得注意层叠顺序。浏览器会把 :link 和 :visited 当作两个独立伪类处理，但它们权重相同，所以声明顺序决定最终效果：
- 如果
a:visited { color: purple; }写在a:link { color: blue; }后面，已访问链接才会显示紫色 - 如果用了类选择器（如
.nav-link:visited），它的权重高于纯元素伪类（a:visited），可能意外覆盖 - 内联样式（
style="color:red"）永远胜出，:visited拿它没辙
如何验证 :visited 确实起作用了
直接看页面常不可靠，因为缓存、隐私模式或扩展插件（如某些广告拦截器）会干扰历史状态。更可靠的验证方式：
- 用 Chrome DevTools 的 Elements 面板右键链接 → “Force state” → 勾选
:visited，强制触发样式计算（此时不受安全限制影响，可用于调试） - 在无痕窗口中打开页面，先手动访问一次目标链接，再刷新，观察颜色是否变化
- 避免用
localhost测试：某些浏览器对本地文件或未加密连接的历史记录处理更宽松，行为不一致
替代方案：当真需要更多控制时
如果业务逻辑必须区分已访问/未访问（比如课程进度标记、文档阅读状态），不能依赖 :visited，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 服务端记录用户点击，返回带 class 的 HTML（如
<a href="https://www.php.cn/link/89d3f7e40882c24e14163199d6c814e0" class="visited">文档二</a>） - 前端用
localStorage或sessionStorage手动标记已访问 URL，再通过 JS 动态加 class - 用
IntersectionObserver+ 后端埋点判断“实际阅读完成”，而非仅靠跳转
浏览器对 :visited 的限制不会松动，越想绕过它做复杂交互，越容易掉进兼容性和隐私合规的坑里。
