:any-link 更可靠，因它只判断是否有 href 属性而不区分访问状态，不受浏览器对 :visited 的隐私限制（如 background-color 等样式被禁用），且匹配所有带 href 的 a/area/link 元素，包括空 href 或 https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488。
为什么 :any-link 比 :link, :visited 更可靠
因为浏览器对 :visited 的样式限制越来越严（出于隐私保护），很多 CSS 属性根本不能用，比如 color 以外的 background-color、transform、animation 等都会被忽略。而 :any-link 是“只判断是否为链接”，不区分访问状态，所以不受这些限制。
常见错误现象：写 a:visited { background: red; } 在 Chrome/Firefox 里完全不生效，但换成 a:any-link { background: red; } 就能正常渲染。
- 使用场景：需要统一高亮所有可点击链接（比如文档侧边导航、API 参考页的锚点列表）
- 兼容性：Chrome 89+、Firefox 86+、Safari 15.4+；旧版 Safari 需用
:link, :visited回退 - 注意：
:any-link只匹配有href属性的a、area、link元素，不含router-link这类自定义组件
:any-link 和 :link 的行为差异在哪
:link 只匹配未访问过的 href 链接，:any-link 匹配所有带 href 的链接——无论是否设置过 href 值、是否为空字符串、甚至是否是相对路径或 https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<a href="">空 href</a>→ 触发:any-link，但不触发:link（因为不是有效 URL） -
<a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">正常链接</a>→ 同时触发:link和:any-link -
<a href="https://www.php.cn/link/acb3a881c7ce9abcae0ce8c99c86a906">页面内锚点</a>→ 触发:any-link，但不会进入:visited状态（除非真跳转过） - 性能影响几乎为零，它只是个匹配器，不触发重排重绘
怎么安全地回退到 :link, :visited
如果必须支持 Safari 15.3 或更早版本，不能直接只写 :any-link，否则老浏览器全失效。
正确写法是层叠覆盖，而不是用 @supports 包裹：
/* 先写老式写法兜底 */
a:link, a:visited {
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0066cc;
text-decoration: underline;
}
<p>/<em> 再用 :any-link 覆盖，新浏览器会优先匹配它 </em>/
a:any-link {
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b0066cc;
text-decoration: underline;
background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf8f9fa; /<em> 这个在 :visited 里会被禁用，但 :any-link 可以 </em>/
}关键点：
- 不要写
@supports selector(:any-link) { ... }—— Safari 15.3 不支持该@supports语法，会导致整块规则被丢弃 - 确保两个规则选择器权重一致，避免意外覆盖
-
:visited的限制依然存在，所以回退规则里别写background或border类属性
容易被忽略的 DOM 边界情况
:any-link 看的是元素是否有 href 属性，而不是“是否真的能跳转”。这点和直觉相反，但很关键。
典型坑：
-
<a href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" onclick="doSomething()">按钮式链接</a>→ 仍匹配:any-link，哪怕你从不希望它被当成链接样式处理 -
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="event.preventDefault()">锚点占位符</a>→ 同样匹配，可能意外获得下划线或背景色 - 服务端渲染时，如果
href是空字符串或null，但 HTML 里写了href=""，依然算:any-link - 想排除这类“假链接”？只能加 class 控制，比如
a.fake-link:any-link { background: none; }，但注意伪类优先级高于 class
真正麻烦的地方在于：你没法靠 CSS 判断一个 href 是否有效，只能靠 JS 清理 DOM 或约定 class 命名规范。
