浏览器强制限制:visited仅能设置颜色类属性，其余声明被静默忽略；:link和:visited权重相同，后声明者覆盖前者，故必须:link在前、:visited在后。
为什么 :link 和 :visited 样式会“互相覆盖”
浏览器强制限制 :visited 可设置的 CSS 属性（仅限 color、background-color、border-color、outline-color 及少数几个 text- 相关属性），其余声明（如 display、font-size、transform）会被静默忽略。如果你写了 a:visited { font-weight: bold; }，它根本不会生效——这不是优先级问题，而是浏览器策略拦截。
:link 和 :visited 的声明顺序必须是 :link 在前、:visited 在后
CSS 伪类本身没有固有优先级差异，它们的权重完全相同（都是 0,1,0）。真正起作用的是「源码顺序」：后声明的规则会覆盖前面同权重的规则。所以如果把 :visited 写在 :link 前面，已访问链接反而会按 :link 的样式渲染（因为后者覆盖了前者）。
正确写法必须是：
a:link {
color: #0066cc;
}
a:visited {
color: #666;
}
常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 用预处理器（如 Sass）时误将
:visited放在嵌套块底部，但父选择器顺序混乱 - 多个 CSS 文件中分别定义了两个伪类，加载顺序不可控
- 用
!important强行提权，结果导致未访问链接也被 “visited 样式” 覆盖
想给已访问链接加图标或 hover 效果？别用 :visited 做复杂样式
现代浏览器禁止 :visited 影响布局或触发可观测行为（比如改变 width、height、visibility，甚至通过 transition 推断访问状态），这是隐私保护机制。试图绕过会导致样式失效或被降级。
替代方案更可靠：
- 服务端记录访问状态，用 class（如
a.is-visited）控制样式 - 前端用
localStorage或sessionStorage手动标记点击过的链接 URL，再动态加 class - 对关键操作链接（如“下载”“订阅”），用 JS 绑定
click后立即添加 class，规避伪类限制
检查是否真被 :visited 限制住了
打开浏览器开发者工具，选中一个已访问的链接，在 Styles 面板里找 a:visited 规则。如果某条声明旁出现灰色横线或「invalid」提示，说明它被浏览器主动屏蔽了——这不是你写错了，是规范使然。
典型被屏蔽的属性包括：font-size、padding、margin、background-image、opacity、transform、animation 等。只有颜色类属性能稳定生效。
别在 :visited 里写布局或动画逻辑，那部分样式注定不会运行。
