必须用.active类而非:active伪类实现持久高亮，因:active仅瞬时生效，无法表示当前页状态；正确做法是HTML手动添加class="active"或JS根据URL动态设置，并配合CSS定义背景色、边框等样式。
用 .active 类而非 :active 伪类
很多人一看到“高亮当前项”，下意识写 a:active { background: #007bff; }，结果点一下就亮、松手就灭——这根本不是“当前页”状态，只是鼠标按下瞬间的反馈。真正的当前项高亮必须持久存在，直到用户跳转到其他页面。所以必须靠显式添加的类，比如 .active 或 .current，由后端渲染时写死，或前端 JS 根据 URL 动态加。
常见错误现象：
-
:active在移动端常触发不稳，尤其在快速点击时可能完全不生效 - 如果菜单是
button或div而非a，:active默认不触发（需加tabindex） - SPA 中路由切换后，
:active不会自动更新，毫无意义
后台菜单结构决定类名添加位置
后台菜单通常是垂直多级折叠式，HTML 常见为嵌套 ul/li，且当前项可能出现在子菜单中。这时不能只给最外层 a 加 .active，而要确保：当前路径匹配的 a 有该类，其所有父级 li 也要有 .open 或 .expanded 类来展开路径。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 后端模板（如 Django/Thymeleaf）直接根据 request.path 渲染
class="nav-link active"和class="nav-item open" - 前端 JS 匹配时，别只查
document.querySelectorAll('a[href]')，要递归向上设父级li的展开类 - 避免用
location.pathname === link.href，改用link.href && location.pathname.startsWith(link.href)，防止/user错误匹配/users
高亮样式必须覆盖默认状态且兼顾可访问性
后台菜单常带图标、文字、角标，仅改文字颜色不够醒目。稳妥做法是组合使用背景色、左侧边框、字体加粗和 aria-current="page" 属性。
示例 CSS（注意优先级）：
.nav-link {
display: flex;
align-items: center;
padding: 10px 16px;
color: #666;
}
.nav-link.active,
.nav-link[aria-current="page"] {
color: #007bff;
background-color: #f8f9fa;
font-weight: 600;
border-left: 3px solid #007bff;
}
关键点：
- 务必加
[aria-current="page"]选择器，让屏幕阅读器能识别当前页 - 背景色比纯文字变色更可靠，尤其在深色主题下
- 左侧边框比下划线更符合后台系统视觉习惯，且不干扰图标对齐
- 如果用了 CSS-in-JS 或 Shadow DOM，检查样式是否被隔离导致失效
JS 自动匹配时最容易漏掉的三个时机
很多后台项目用 JS 动态加 .active，但上线后发现首页不亮、二级菜单不亮、刷新后失效——问题几乎都出在执行时机不对。
必须确保：
- DOM 加载完成后再运行匹配逻辑：
document.addEventListener('DOMContentLoaded', ...)或$(document).ready(...) - SPA 路由（如 Vue Router / React Router）需监听
router.afterEach或useEffect，不能只靠初始加载 - 子应用（qiankun 等微前端）中，主应用切换路由时，子应用的菜单 DOM 可能还没挂载，得加 MutationObserver 监听容器变化
复杂点在于：后台菜单往往需要「模糊匹配」（如 /admin/users/edit/123 应高亮 /admin/users），但又不能过度宽松；这个边界判断一旦写错，就会出现多个项同时高亮，或者一个都不亮——得靠真实路径数据反复验证，不能只凭直觉写正则。
