现代浏览器限制 :visited 仅能修改 color 等极少数颜色属性，非颜色样式会静默失效，且必须遵循 LVHA 顺序声明；替代方案是用 JS + localStorage 实现更灵活的访问状态控制。
为什么 :visited 样式看起来“不生效”或被浏览器限制
现代浏览器（Chrome、Firefox、Safari）出于隐私保护，严格限制了 :visited 可修改的 CSS 属性。你无法通过它改变 color 以外的多数视觉属性——比如 background-color、border、transform、font-size，甚至 opacity 都可能被忽略。更关键的是：一旦你对 :visited 设置了非颜色类样式，整条规则可能被完全丢弃（不是报错，而是静默失效）。
这是故意设计的行为，防止网站通过样式探测用户历史访问记录（例如用 JS 测量元素尺寸变化来反推是否访问过某链接）。
- 只安全可用的属性包括：
color、outline-color、border-color（仅边框颜色，不含宽度/样式）、column-rule-color等极少数颜色相关属性 -
:visited必须写在:link之后，否则会被覆盖（CSS 层叠顺序要求） - 不能用
!important绕过限制——它不起作用
:link 和 :visited 的匹配逻辑与常见误用
:link 匹配所有未访问过的 <a href="..."> 元素；:visited 匹配已访问过的。注意：它们**只对带有 href 属性的 <a> 生效**，<a name="..."></a> 或无 href 的链接不会触发任一伪类。
容易出错的情况：
立即学习“前端免费学习笔记（深入）”；
- 写成
a:link:hover却忘了给a定义基础样式（如color），导致悬停时颜色突变不可控 - 用 JavaScript 动态设置
href后，:visited不会自动更新（浏览器只在页面加载时或导航后更新状态） - 本地文件（
file://协议）下，部分浏览器完全禁用:visited（出于安全策略）
如何写出可靠且可维护的链接状态样式
推荐按如下顺序声明，兼顾可读性与浏览器兼容性（包括旧版 IE）：
a:link { color: #0066cc; text-decoration: none; }
a:visited { color: #666666; }
a:hover { color: #004499; text-decoration: underline; }
a:active { color: #002255; }
说明：
- 务必把
:link放最前，:visited紧随其后，再是:hover和:active（LVHA 顺序） - 避免在
:visited中设置text-decoration—— 大多数浏览器会忽略，且可能干扰用户对“已访问”的感知 - 如果需要区分“已访问但不可点击”，应靠 JS 添加 class（如
is-visited-disabled），而非依赖伪类
替代方案：当 :visited 不够用时怎么办
如果你真需要基于访问状态做更复杂的 UI 控制（比如加图标、改背景、隐藏/显示内容），唯一可靠的方式是放弃纯 CSS，改用 JS + 存储机制：
- 用
localStorage记录用户点过的链接 URL（需注意路径标准化，如统一处理 trailing slash） - 页面加载时遍历所有
<a>，检查href是否在已访问列表中，并添加自定义 class（如is-visited-js） - 配合 CSS 规则控制样式：
a.is-visited-js::after { content: "✓"; margin-left: 4px; } - 注意跨域限制：无法检测用户是否访问过其他域名下的链接（这是浏览器故意限制的，JS 也做不到）
真实项目里，过度依赖 :visited 做功能增强往往得不偿失——它的能力边界太窄，而 JS 方案可控、可测、可 debug。
