: any-link没变色最常见原因是href为空或仅空格，其次误用标签、浏览器版本过低、父级重置样式、非法链式伪类；仅color等颜色类属性跨状态生效，font-size等无效；不能用于js查询，推荐直接用:any-link而非a:any-link。
为什么写了 :any-link 却没变色
最常见原因是 href 值为空或仅含空格：href="" 或 href=" " —— 浏览器根本不认为这是有效链接，直接跳过匹配。其次是误选了 <link> 标签，它不参与页面导航，:any-link 只作用于解析后「可跳转」的 a 和 area 元素。
还有三个硬性门槛：Chrome 必须 ≥ 89、Firefox ≥ 84、Safari ≥ 15.4；父级用了 all: unset 或 color: inherit，把颜色继承链吞掉了；写了 a:any-link:hover 这种非法链式伪类，整条规则被浏览器静默丢弃。
:any-link 哪些 CSS 属性真能跨状态生效
受 :visited 隐私策略限制，只有颜色类属性能在已访问链接上保留效果，其余一律静默丢弃——这不是 bug，是浏览器强制行为，绕不开。
- ✅ 稳定生效：
color、background-color、border-color、outline-color、text-decoration-color、text-decoration（如underline） - ❌ 白写无效：
font-size、padding、margin、transform、opacity、font-weight、line-height
比如 :any-link { font-size: 16px; color: #0d6efd; }，已访问链接只会应用 color，font-size 回退到默认值。
:any-link 能不能用在 JavaScript 里查元素
不能。:any-link 是纯 CSS 伪类，不是标准 DOM 选择器。以下全部会抛 SyntaxError：
document.querySelector(':any-link')document.querySelectorAll('a:any-link')el.matches(':any-link')
若需 JS 判断某元素是否为链接，只能手动检查：el.tagName === 'A' && el.href && el.href.trim()。别指望它像 :hover 那样能被 JS 捕获。
怎么写才不容易翻车
推荐写法是 :any-link（不带标签名），语义更准确，也避免 specificity 意外升高；若要兼容老浏览器，必须降级为 a:link, a:visited 显式组合。
关键细节：
- hover 写法必须是
:any-link:hover，不是a:any-link:hover - 权重和
a:hover相同，如果后者定义在后面，就会覆盖前者 - 想让未访问/已访问链接有不同颜色？
:any-link不行，必须拆成a:link和a:visited
真正难搞的从来不是语法，而是你写了之后发现部分样式“看起来没生效”——大概率是隐私限制在后台悄悄拦截，或者继承链把你绕晕了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
