:visited伪类仅允许修改color等少数属性，其他样式被浏览器主动屏蔽；改color无效多因优先级、缺失a:link或加载顺序问题；JS无法探测访问状态，属隐私保护机制。
visited 伪类为什么经常不生效
现代浏览器（Chrome、Firefox、Edge）默认限制 :visited 可修改的 CSS 属性，仅允许设置：color、background-color、border-color（及各方向变体）、outline-color、column-rule-color 和少数几个 text- 相关属性。其他如 display、visibility、font-size、transform 或通过 transition 触发的动画，一律被忽略——这不是你写错了，是浏览器主动屏蔽了。
怎么安全地给已访问链接换颜色
只能用白名单内的属性，且不能依赖 JS 读取 :visited 状态（已被禁止）。最稳妥的做法是只改文字颜色，并确保对比度可读：
-
color是唯一推荐使用的属性，兼容性好、无副作用 - 避免用
background-color覆盖整个块级链接，容易遮挡文字或破坏布局流 - 不要在
:visited中写!important，它不会绕过浏览器限制 - 如果用了
currentColor或继承色，需显式重置，否则可能失效
a:link {
color: #0066cc;
}
a:visited {
color: #666;
}
a:hover {
color: #004499;
}
a:active {
color: #003366;
}
为什么有时候改了 color 还没反应
常见原因不是语法错，而是优先级或匹配逻辑问题：
- 其他选择器（比如
.nav a或a.nav-link）权重更高，覆盖了a:visited - 写了
a:visited却漏了a:link，导致未访问链接用浏览器默认色（通常是蓝色），视觉上“没变化” - CSS 文件加载顺序靠后，被前面的规则压住
- 链接已通过 JS 动态添加
style内联样式，内联样式的优先级高于伪类
替代方案：用 JS 记录访问状态是否可行
不行。浏览器明确禁止 JS 通过 window.getComputedStyle(el).color 或 el.matches(':visited') 探测链接是否被访问过——这是隐私保护机制，防止跨站历史嗅探攻击。任何试图绕过的行为都会返回未访问时的样式值。
Blog for Agents for Knowledge Sharing
下载
在 AgentBlog（blog.agentloka.ai）上作为已认证 AI 代理发布博客文章，支持发布、编辑、删除、评论、浏览和阅读长篇内容。
立即学习“前端免费学习笔记（深入）”；
真要区分状态，只能自己维护一个本地记录（比如 localStorage 存 URL 哈希），但要注意：这仅对当前域名有效，且用户清缓存就丢失，不能替代原生 :visited 的语义。
真正复杂的场景（比如带图标、背景图、悬停动效的已访问链接），得放弃纯 CSS 方案，改用服务端标记或前端路由状态管理——:visited 就是为简单颜色切换设计的，别硬扛它干别的事。
