直接用 [aria-current="page"] 选择器即可，无需 javascript 或额外 class；推荐写成 a[aria-current="page"] 以精准匹配导航链接，兼顾语义化与无障碍支持。
直接用 [aria-current="page"] 选择器就行
不需要 JavaScript，也不用额外 class。只要 HTML 中某个 <a></a> 标签带了 aria-current="page" 属性，CSS 就能精准捕获它：
-
[aria-current="page"]是最简、最语义化的写法，匹配所有含该属性的元素 - 如果只想作用于导航链接，写成
a[aria-current="page"]更安全，避免误中其他元素（比如<span></span>或<li>） - 这个选择器在所有现代浏览器中完全支持，包括 Safari 15.4+、Chrome 88+、Firefox 69+
为什么别用 .active 或 .current 类替代
单纯靠 class 实现高亮，对屏幕阅读器用户是“不可见”的——他们听不到“当前页面”这个语义。
-
class="active"只是视觉标记，辅助技术完全忽略它 - 若同时加
class="active"和aria-current="page"，属于冗余；若只加 class，就等于放弃无障碍 - 有些框架（如 React Router v6.4+ 的
<navlink></navlink>）默认输出aria-current="page"，但不会自动加.active，硬套 class 反而容易错位
常见样式冲突和优先级问题
你写了 a[aria-current="page"] { font-weight: bold; } 却没生效？大概率是 CSS 优先级被覆盖了。
- 检查是否被更具体的选择器压住，比如
.nav ul li a { color: #333; }比a[aria-current="page"]权重高 - 稳妥做法是提升权重：
.nav a[aria-current="page"]或nav a[aria-current="page"] - 避免用
!important，它会让后续维护变困难；优先通过结构化选择器解决 - 注意：伪类如
:hover和:focus默认优先级低于属性选择器，所以a[aria-current="page"]:hover要单独定义
动态路由下容易漏掉的细节
前端路由（如 Vue Router、React Router）常在 JS 加载后才设置 aria-current，但首屏 HTML 里它是空的——这对 SEO 和首屏可访问性是硬伤。
- 服务端渲染（SSR）或静态站点生成（SSG）时，必须在 HTML 输出阶段就写入正确的
aria-current="page" - 客户端路由中，确保
<navlink></navlink>或等价组件启用end属性（React Router）或exact（旧版），否则 /dashboard 匹配到 /dashboard/analytics 也会被标为当前页 - 多级菜单中，仅叶子节点应带该属性；父级菜单项（如 /dashboard）不应加，除非 URL 精确匹配
aria-current="page" 是否真实存在于初始 HTML 中、是否严格按 URL 路径匹配、以及 CSS 是否真的能稳定命中那个元素。这三个点任一出错，视觉和语义就会脱节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
