:visited伪类仅允许修改颜色相关样式以防止历史记录泄露，安全可用属性仅有color、outline-color、border-*-color等少数颜色属性，其他如font-weight、background-color、text-decoration均被禁用。
为什么:visited现在几乎不能改颜色以外的样式
因为安全限制，现代浏览器（Chrome、Firefox、Safari）从多年前就阉割了:visited的大部分样式能力。你没法用它改font-weight、background-color、transform，甚至transition都会被忽略——浏览器怕通过样式差异反推用户历史访问记录。
能安全使用的只有：color、outline-color、border-*-color（仅边框颜色，不包括宽度/样式）、column-rule-color，以及少数几个和颜色直接相关的属性。
- 想加下划线？不行，
text-decoration被禁用了 - 想让已访问链接变粗？
font-weight无效 - 想用
background标出已访问项？整个背景色都不行，只允许border-color这种“边缘”颜色
如何可靠设置已访问链接的文字颜色
这是:visited唯一稳定可用的场景。但要注意：必须写在:link之后，否则会被覆盖；而且不能依赖继承，得显式声明。
- 顺序必须是：
a:link→a:visited→a:hover→a:active（LVHA规则） - 别写
a:visited { color: inherit; }——很多浏览器会无视，当成未设置 - 避免用
!important，它在:visited里可能被忽略或触发兼容性问题
/* 正确 */
a:link { color: #0066cc; }
a:visited { color: #666; }
a:hover { color: #004499; }
a:active { color: #002266; }
遇到:visited完全不生效？先检查这三件事
不是代码写错，大概率是环境或写法踩了坑。
- 链接
href值为空、#或javascript:void(0)——这些都不是“可访问的历史URL”，:visited不会触发 - 页面是
file://协议打开的（比如双击HTML文件）——多数浏览器禁用:visited以防止本地文件窥探 - CSS被放在
里但没加scoped（Vue等场景），或被CSS-in-JS动态注入时作用域隔离导致伪类失效
替代方案：用JavaScript手动标记已访问链接
如果真需要背景色、图标、状态类这些视觉反馈，就得绕开:visited，自己维护访问状态。
- 监听
click事件，给目标加class="visited"，再用CSS定义该类样式 - 用
localStorage持久化记录，刷新后仍有效：localStorage.setItem('visited_' + href, '1') - 注意同源限制：跨域链接无法读取
localStorage，也不能用fetch探测是否可访问（CORS阻止）
复杂点在于：用户可能从书签、历史记录直接进入目标页，这类“非点击跳转”不会触发你的JS逻辑——所以纯前端方案永远有盲区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
