a:active是伪类，仅在鼠标按下瞬间生效；a.active是类选择器，匹配html中class="active"的链接，用于持久高亮当前页面。
为什么 a:active 不等于 a.active
这是最常踩的坑：你在 CSS 里写了 a:active { color: red; }，HTML 里也加了 class="active"，但高亮就是不出现。因为 a:active 是伪类，只在鼠标按下瞬间触发；而 a.active 才是你需要的目标选择器——它匹配带 active 类的链接元素。
必须写成这样才对：
a.active {
color: #0d6efd;
font-weight: 600;
}
- 别漏掉点号（
.），a.active≠a:active - 如果导航项是
<li>包着@#@#@#@#@#@#@#@#@#@0 - ❌ 错误：
<div class="dropdown-menu"><li class="active">...</li></div>（这不会让顶部 toggle 高亮） - 记得同步加
aria-current="page"，不是"true"，这对屏幕阅读器识别当前页很关键
点击后不保留 active 是正常现象
Bootstrap 不做任何路由感知，active 是纯静态类。页面跳转后，新 HTML 里没写 active，自然就不高亮。
- 服务端渲染：模板里根据当前路径（如
request.path）判断，手动注入active类 - 前端 SPA：用
useMatch（React Router）、router-link-active（Vue Router），或监听popstate+document.querySelector手动同步 - 别指望 JS 点击事件自动加 class 后能“记住”——除非你同时处理了 URL 更新和 DOM 更新两个动作
最容易被忽略的是：下拉菜单的激活逻辑和普通链接不同，它不依赖 href 匹配，而依赖用户意图（比如“Products”这个入口是否代表当前上下文），这时候靠路径字符串对比往往不准，得结合业务状态来判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
