现代浏览器为保护隐私严格限制:visited可修改的CSS属性，仅允许color、background-color等少数样式，其他属性被静默忽略；应改用后端状态+class方案实现“已读/未读”效果。
为什么给 :visited 设置颜色没反应
现代浏览器出于隐私保护，严格限制了 :visited 伪类能修改的 CSS 属性。你只能安全地设置：color、background-color、border-color（含各方向）、outline-color，以及部分 text- 和 column- 开头的属性。其他如 font-size、display、transform、visibility 都会被忽略，且不会报错——它就安静地不生效。
这是故意设计的行为，不是 bug。浏览器通过禁止样式差异来防止脚本探测用户历史访问记录。
- 别试图用
:visited控制布局或触发动画 - 不要在
:visited中写transition或animation，它们不会运行 - 若发现颜色没变，请先确认链接确实已被访问过（可手动点开再返回），并检查是否被更具体的规则覆盖（比如
a:hover:visited的优先级高于单独的:visited）
:hover 和 :visited 的层叠顺序怎么写才可靠
CSS 伪类的声明顺序会影响最终效果，尤其当多个伪类共存时。标准推荐顺序是 :link → :visited → :hover → :active（LVHA），但实际中 :link 和 :visited 互斥（未访问/已访问），真正需要协调的是 :hover 和 :visited 的组合。
如果你想让“已访问链接悬停时显示红色”，必须显式写出 a:visited:hover，而不是依赖 :hover 覆盖 :visited —— 因为两者权重相同，后声明者胜出，但语义上 :visited:hover 更准确且兼容性更好。
立即学习“前端免费学习笔记（深入）”；
a:link { color: #0066cc; }
a:visited { color: #666666; }
a:hover { color: #ff3300; }
a:visited:hover { color: #cc0000; }
a:active { color: #003366; }
-
a:hover不会覆盖a:visited的颜色，除非你明确写a:visited:hover - 避免写
a:hover:visited—— 语法合法但语义反直觉，部分旧浏览器解析异常 - 移动端无 hover，
:hover在触摸设备上仅对可聚焦元素（如带tabindex的）偶尔触发，不可依赖
如何检测一个链接是否真被 :visited 匹配到了
无法用 JavaScript 直接读取 :visited 状态，这是同源策略和隐私模型共同封禁的能力。你不能调用 getComputedStyle(link).color 来判断它是否已访问——返回值总是未访问时的样式（即使它其实是已访问的）。
唯一可行的间接方式是：利用浏览器对 :visited 样式限制的特性，结合 document.elementFromPoint() 或 layout 触发做侧信道探测——但该方法已被主流浏览器彻底堵死（Chrome 89+、Firefox 95+ 均禁用），且属于反模式，不应在生产环境使用。
- 不要尝试绕过
:visited限制去统计用户浏览行为 - 服务端日志、UTM 参数、前端埋点（点击事件）才是合规的访问追踪方式
- 如果 UI 需要区分“是否看过”，应由后端返回状态字段（如
is_read: true），再用 class 控制样式
替代方案：不用 :visited 实现“已读/未读”视觉反馈
当设计需要明确表达“用户是否点过这个链接”，又不想受 :visited 限制，最稳妥的方式是放弃自动匹配，改用显式状态管理。
例如，在渲染链接时，根据后端返回的 read_at 字段添加 class：
标题
然后用 CSS 控制：
.link-article { color: #0066cc; }
.link-article.is-read { color: #999; text-decoration: line-through; }
.link-article:hover { color: #ff3300; }
.link-article.is-read:hover { color: #cc0000; }
- 完全规避
:visited的隐私限制和样式残缺问题 - 支持任意样式变化：加删线、改背景、加图标、动画过渡
- 状态与业务逻辑一致，可配合缓存、WebSocket 实时同步
浏览器对 :visited 的限制只会越来越严，靠它做核心交互逻辑，迟早掉坑里。
