:local-link伪类目前未被任何主流浏览器实现，不能用于生产环境；它在css selectors level 4中定义但chrome、firefox、safari、edge均不支持，连caniuse.com也未列入，开发者工具中无匹配行为。
:local-link 伪类目前**没有被任何主流浏览器实现**，不能用于生产环境。它在 CSS Selectors Level 4 规范中定义，但截至 2026 年 5 月，Chrome、Firefox、Safari、Edge 均不支持该伪类——连 caniuse.com 都未将其列入支持表，开发者工具里也查不到匹配行为。
为什么 :local-link 看起来“应该能用”但实际无效
规范里说 :local-link 应匹配“指向当前文档内锚点的链接”，比如 <a href="#section1"></a> 或完整 URL 与当前页面完全一致的链接（如当前页是 https://example.com/page.html，而链接也是 href="https://example.com/page.html"）。但现实是：
- 所有浏览器都忽略该伪类声明，样式不会应用，DevTools 中也看不到匹配高亮
- 即使写成
a:local-link { color: red; }，也会被当作无效选择器静默丢弃 - 它和
:link/:visited不同——后两者有明确的 UA 样式和状态管理，而:local-link没有对应的底层状态钩子
替代方案：用属性选择器模拟 local-link 行为
最可靠、兼容性 100% 的做法是用 [href^="#"] 匹配页面内锚点，再结合 [href] 排除空链接：
/* 匹配所有 href 以 # 开头的链接（即跳转到本页锚点） */
a[href^="#"] {
color: #2563eb;
}
<p>/<em> 可选：排除 href="#" 这种无意义的链接 </em>/
a[href^="#"]:not([href="#"]) {
text-decoration: none;
}</p>
如果你还需覆盖完整 URL 指向当前文档的情况（比如 href="/page.html" 或 href="https://site.com/page.html"），就得靠 JavaScript 动态加 class，纯 CSS 无法安全判断相对路径是否解析后等于当前 location.href。
别踩坑：:local-link 和 :any-link / :link 完全不是一回事
有人会混淆这几个伪类，实际区别很关键：
-
:link只匹配href存在且未访问过的链接（不管指向哪） -
:any-link匹配任意带href的<a></a>，无论是否访问过 -
:local-link理论上要判断 URL 解析后的目标是否与当前文档相同——这个逻辑浏览器根本没实现 - 不存在所谓“浏览器部分支持”或“需加前缀”的情况；它就是不可用
真正想区分站内/站外链接，得靠服务端注入 class，或前端用 new URL(anchor.href, document.baseURI) 对比 location.origin + location.pathname 后打标记。CSS 层面，:local-link 目前只适合写在实验性 demo 里画饼，别放进上线代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
