:any-link比:link更可靠，因其仅需href属性存在且非空即匹配，不依赖url解析与访问状态判断，故能覆盖javascript:void(0)等伪链接，而:link要求合法可跳转url。

:any-link 能匹配所有带 href 属性的 @#@#@#@#@#@#@#@#@#@0 → :any-link 匹配，:link 不匹配

@#@#@#@#@#@#@#@#@#@1 → 两者都匹配

@#@#@#@#@#@#@#@#@#@2 → 两者都不匹配（空字符串被忽略）

@#@#@#@#@#@#@#@#@#@3 → :any-link 匹配（属性存在），:link 可能不匹配（解析失败）

:any-link 的兼容性与 fallback 方案

Chrome 65+、Firefox 57+、Safari 15.4+ 支持；Edge 79+（Chromium 内核）可用。IE 完全不支持，且无 polyfill。

• 若需兼容旧版 Safari（a[href] 替代 —— 行为高度接近，但无法区分“有 href”和“有 href 且可跳转”
• 避免混用：a:any-link, a[href] 会导致旧浏览器解析失败（选择器整体失效）
• 真正需要区分已访问/未访问时，仍得用 :link / :visited，:any-link 不替代它们

实际样式中容易踩的坑

伪类优先级与继承行为常被低估，尤其在组件化场景下。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 如果父元素设了 color: gray，而 a:any-link { color: blue; } 没加 !important，可能被覆盖
• :any-link 不触发 :visited 的隐私限制，所以可安全设置 background、padding 等属性，但不能读取 :visited 的颜色值
• Vue/React 中动态渲染 <a></a> 时，若 href 是空字符串或 null，DOM 属性不出现，:any-link 自然不匹配 —— 注意模板中是否写了 v-bind:href="url || undefined"

真正要注意的是：它只认属性存在性，不校验 URL 合法性；用错场景（比如想标记“可点击”却忘了 href 是空字符串）比兼容性问题更常见。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！