:any-link 只匹配含非空 href 的 a 元素，且仅 color 等少数属性在已访问链接上生效；伪类链式写法受限，兼容性有限，老浏览器需降级为 a:link,a:visited。
:any-link能统一设置未访问和已访问链接的样式，但**只在特定条件下生效，且能生效的属性非常有限**。别把它当万能合并写法用，先确认你真需要它。
哪些元素会被 :any-link 匹配
它只匹配解析后「可跳转」的 a 元素，且必须满足两个硬性条件：
-
href属性存在且非空（href="https://example.com"✅，href=""或href="#"❌） - 元素是 HTML 中的
a（、在部分浏览器中支持但不推荐，完全不匹配）
常见翻车点： 不算有效链接，:any-link 直接跳过；JS 动态插入 href 后，:any-link 不会自动重匹配——得靠 class 切换或强制重绘。
:any-link 能改哪些 CSS 属性
受浏览器 :visited 隐私策略限制，已访问链接上只有颜色类属性真正生效：
- ✅ 可靠生效：
color、background-color、border-color、outline-color、text-decoration-color - ❌ 静默丢弃：
font-size、font-weight、padding、margin、opacity、transform、text-decoration（除 color 外）
比如写 a:any-link { font-weight: bold; color: #333; }，未访问链接加粗+灰字，已访问链接只显示灰字，加粗被忽略——这不是 bug，是浏览器强制行为。
:any-link:hover 写法与优先级陷阱
伪类链式写法有严格限制：
-
a:any-link:hover是非法语法，整条规则被浏览器丢弃 - 正确写法是
:any-link:hover（不带标签名）或a:hover:any-link（语义混乱，不推荐） -
:any-link:hover和a:hover权重相同，若后者定义在后面，会覆盖前者样式
想统一 hover 效果，直接用 :any-link:hover；但若要区分未访问/已访问 hover 颜色（比如未访问变深蓝、已访问变暗紫），就必须拆成 a:link:hover 和 a:visited:hover ——:any-link 不提供状态分离能力。
兼容性与降级方案
:any-link 在 Chrome 89+、Firefox 84+、Safari 15.4+ 原生支持；Safari 15.3 及更早、所有 IE、多数老 Android WebView 完全不识别。JS 中也不能用：document.querySelector(':any-link') 会抛 SyntaxError。
稳妥做法是显式组合：
a:link, a:visited {
color: #007bff;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
如果项目需支持 Safari 15.3 或旧安卓 WebView，别碰 :any-link；哪怕只用它设颜色，也得同步补上 a:link, a:visited 规则，否则老浏览器直接失效。
真正容易被忽略的不是语法，而是隐私限制下“看起来生效了，其实一半没动”——已访问链接的字体粗细、内边距、过渡动画，统统不会如你所愿。这点没法绕开，只能接受。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
