:visited伪类仅支持有限颜色属性，其他样式被静默忽略；必须用具体颜色值且配合:link声明，禁用变量、动画及非颜色属性。
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，也会让浏览器对所有 <a href> 元素启用历史匹配逻辑。在含数百个外链的页面（比如搜索结果页）中，这会轻微拖慢首次绘制——虽然测不出来，但确实存在。
- 建议只对明确需要区分的链接容器加样式，比如
.nav-link:visited，而不是全局a:visited - 如果项目用 CSS-in-JS（如 styled-components），确保生成的
:visited规则没有意外带上禁止属性（比如自动插入transition） - 测试时务必在无痕窗口操作，普通窗口的历史记录会让效果看起来“不稳定”
