浏览器对:visited的限制是强制隐私策略，仅color等少数属性生效且受限；禁止嵌套选择器；失效常因URL差异、优先级或顺序问题；动态效果需服务端或localStorage实现。
浏览器对 :visited 的限制不是“兼容性问题”，而是强制执行的隐私安全策略——你无法绕过，只能适配。
哪些 CSS 属性在 :visited 中真正起作用
现代浏览器（Chrome 136+、Firefox、Safari）只允许以下属性在 :visited 中生效，且有额外约束：
-
color：必须是不带透明度的纯色值（#666✅，rgba(102,102,102,0.8)❌） -
background-color：仅支持纯色，linear-gradient或url()会被静默忽略 -
border-color（含border-top-color等细分项），但border-width或border-style不行 -
outline-color、column-rule-color、fill和stroke（仅对内联 SVG 元素有效） -
opacity：仅0或1可靠，中间值（如0.5）可能被四舍五入或丢弃
所有其他属性，包括 font-size、display、transform、text-decoration、visibility、transition（哪怕只写 transition: color .2s），都会被浏览器直接忽略，不报错、不重排、不触发任何渲染逻辑。
:visited 选择器为什么不能嵌套或组合
浏览器要求 :visited 必须直接作用于带 href 的 <a> 元素，且禁止任何“间接影响”写法：
立即学习“前端免费学习笔记（深入）”；
-
a:visited✅ 合法，直接匹配链接本身 -
.nav-link:visited⚠️ 高风险：若.nav-link是容器而非<a>，样式无效 -
a:visited span❌ 完全无效：不能通过:visited影响后代元素 -
a:hover:visited❌ 语法虽不报错，但语义错误且旧版浏览器解析异常；应写成a:visited:hover
根本原因：防止通过复杂选择器链 + getComputedStyle() 探测历史访问状态。浏览器在解析时就剥离了所有非直连、非原子的选择器结构。
为什么改了 color 却看不到变化
即使用了合法属性，常见失效原因包括：
- 链接 URL 实际不同：例如
/page.html和/page.html?utm_source=mail被视为两个独立地址 - 未真实跳转并返回：页面刚加载时，浏览器尚未完成历史匹配；需用户点击该链接、跳转到目标页、再返回原页才触发
- CSS 优先级冲突：
a[href]或a.nav-link等高权重规则覆盖了a:visited，尤其当后者没加!important且前者颜色值更具体时 - 伪类顺序错误：若
a:hover写在a:visited之前，且两者都设了color，悬停时会按声明顺序覆盖，导致已访问链接悬停后颜色“回退”
调试建议：用 DevTools 的 Styles 面板检查元素，确认 :visited 规则是否被划掉（strikethrough）；若被划掉，说明该规则因违反隐私策略被丢弃，而非未命中。
想做图标、动画或动态反馈？别碰 :visited
所有超出颜色类的视觉需求，:visited 都无法满足。可行路径只有两条：
- 服务端注入 class：后端根据用户浏览记录，在 HTML 中直接给对应
<a>加class="visited" - 前端手动记录：用
localStorage存储已点击的href，页面加载时遍历链接并添加 class；注意监听pagehide或beforeunload保证跨页跳转也能记录
关键点在于：浏览器彻底封死了 JS 读取 :visited 状态的通道——getComputedStyle(el).color 永远返回未访问时的值，el.matches(':visited') 抛错或恒为 false。这不是 API 缺失，而是设计使然。
