CSS如何用visited管理链接状态

CSS中的:visited伪类因隐私保护被浏览器严格限制，仅允许设置有限的几种颜色属性（如color、border-color等），其他样式如字体加粗、动画、过渡甚至CSS变量均会被静默忽略；它要求使用具体颜色值、必须与:link配合声明，且在跨域或特定Referrer策略下可能失效——这意味着你精心设计的“已访问链接效果”很可能根本不会显示，真正安全有效的做法只是用对比清晰的灰阶色微调文字颜色，适用于导航或历史列表等少数场景，而非正文链接。

visited伪类为什么经常不生效

浏览器出于隐私保护，大幅限制了 :visited 可设置的CSS属性——只允许修改 color、background-color、border-color（及其子属性如 border-top-color）、outline-color 和 column-rule-color。其他任何尝试，比如 display、font-size、visibility，都会被静默忽略。

常见错误现象：写了 a:visited { font-weight: bold; } 却没效果；或用 JavaScript 读取 getComputedStyle(el).color 判断访问状态，结果在 Chrome/Firefox 中返回默认色而非真实设置值。

• 所有颜色相关样式必须使用具体颜色值（如 #666、rgb(102, 102, 102)），不能用 inherit、currentcolor 或透明色（transparent 会被当作未设置）
• 动画、过渡（transition、animation）对 :visited 完全无效，连触发都不行
• 如果链接是跨域资源（比如 https://example.com），且目标站点设置了 Referrer-Policy: no-referrer，部分浏览器可能无法准确标记为“已访问”

如何安全地给已访问链接设色

最稳妥的做法是仅用 color 配合足够对比度的灰阶色，避免依赖视觉复杂度来传达状态。别试图用颜色+图标+粗体组合，图标和粗体根本不会渲染。

使用场景很窄：通常只用于侧边栏导航、文章内引用链接、或历史记录列表这类用户明确需要区分“去过哪”的地方。普通正文内链极少需要单独设 :visited，反而干扰阅读节奏。

• 推荐写法：a:link { color: #007bff; } a:visited { color: #6c757d; }（注意必须同时声明 :link，否则 :visited 可能被覆盖）
• 不要写成 a:visited { color: var(--visited-link-color); } —— CSS 变量在 :visited 中不可用
• 若需兼容旧版 Safari（hsl() 或 lab() 等新颜色函数，某些版本会回退到默认色

为什么不能用JavaScript检测visited状态

现代浏览器彻底封禁了通过脚本探测用户浏览历史的能力。调用 window.getComputedStyle 获取 :visited 元素样式时，返回值总是与 :link 一致；尝试读取 el.style.color 也拿不到实际应用的值。

这是硬性安全策略，不是 bug，也不是配置问题。任何所谓“绕过检测”的方案（比如测量元素尺寸差异、监听伪类变化事件）在当前主流浏览器中均已失效。

• 错误示例：if (getComputedStyle(link).color === 'rgb(108, 117, 125)') { ... } —— 永远返回 :link 的颜色
• 替代思路：如果业务真需要“已访问”标识（如课程学习进度），必须由后端记录并下发状态，前端用 class（如 is-visited）控制样式
• 切勿在 SSR 渲染时服务端判断 visited 并注入 class —— 这会导致缓存污染或隐私泄露风险

兼容性和性能影响很小，但别滥用

:visited 的渲染开销几乎为零，浏览器内部早做了优化。真正的问题在于它极易被误用：开发者常以为它是“状态管理工具”，其实它只是个极其受限的视觉提示开关。

容易被忽略的一点是：哪怕只设一个 color，也会让浏览器对所有 元素启用历史匹配逻辑。在含数百个外链的页面（比如搜索结果页）中，这会轻微拖慢首次绘制——虽然测不出来，但确实存在。