:visited伪类仅允许修改极少数样式（如color、border-color等纯色属性），禁用font-weight、display等所有可能泄露浏览历史的属性，chrome/firefox/safari统一执行该隐私保护策略。
为什么:visited现在几乎不能改颜色以外的样式
浏览器出于隐私保护，从多年前就开始限制:visited伪类的能力——你只能安全地修改color、outline-color、border-color（仅部分边）、background-color（仅纯色）等极少数属性。其他如font-weight、display、visibility、transform，哪怕写上去也完全无效。
这是硬性限制，不是写法错，也不是浏览器兼容问题。Chrome、Firefox、Safari 全部执行同一套策略。
- 想靠
:visited隐藏链接或加动画？做不到 - 想用
:visited触发 JS 事件？不行，:visited不触发click或mouseenter - 检查是否生效？别看 DevTools 的“Styles”面板——它会显示你写的规则，但实际渲染时已被浏览器静默忽略
:visited颜色设置的实操要点
能用的颜色属性有限，但颜色本身也有讲究：必须是不带透明度的纯色值（rgb()、hex、命名色均可），避免用rgba()或hsla()，否则部分浏览器可能回退为默认色。
- 推荐写法：
a:visited { color: #666; }或a:visited { color: darkgray; } - 慎用：
a:visited { color: rgba(102, 102, 102, 0.8); }—— 在 Safari 和旧版 Firefox 中可能失效 - 注意层叠顺序：
a:link、a:visited、a:hover、a:active要按 LVHA 顺序写，否则:visited可能被:hover覆盖
为什么有时候:visited根本不生效
最常见原因是链接没被真正“访问过”：浏览器只对同源、完整 URL（含协议、路径、查询参数）的已访问历史记录打标记。几个典型失效场景：
- 本地文件打开（
file://协议）—— 大多数浏览器禁用:visited逻辑 - 页面刚部署，用户首次访问，且链接指向的是新域名或带不同参数的 URL（比如
/post?id=1和/post?id=2算两个独立链接） - CSS 规则被更高优先级选择器覆盖，例如
.nav a:visited比a:visited优先级高，但你只写了后者 - 用了
!important？别加——它在:visited里不被允许，加了反而让整条规则被忽略
替代方案：什么时候该放弃:visited，改用 JS 记录
如果你真需要区分访问状态并做复杂交互（比如加图标、折叠菜单、统计点击），:visited不是可靠选择。得换思路：
- 用
localStorage或sessionStorage手动存链接 URL，加载时查缓存再加 class，例如：document.querySelector('a[href="/about"]').classList.add('visited') - 服务端渲染时注入访问状态（适合登录态明确的场景）
- 注意：不要用
document.styleSheets去动态插入:visited规则——它依然受浏览器限制，无效
真实项目里，越早接受:visited只是个“视觉提示弱信号”的事实，越少掉坑。它从来就不是状态管理工具，只是 CSS 给的一点点礼貌性反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
