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>包着<a>，且你给<li>加了active，那得用li.active a或.nav-item.active .nav-link这类更具体的选择器 - Bootstrap 默认没给
.nav-link.active加底边框，想靠边框高亮？得自己补border-bottom规则
.nav-link.active 样式不生效的三个真实原因
即使你写了 .nav-link.active，也可能被压住、结构错、或加载顺序乱。
- 优先级不够：Bootstrap 的
.navbar-nav .nav-link规则常比你的.nav-link.active更具体，直接被覆盖。改用.navbar-nav > .nav-item > .nav-link.active - DOM 结构不对：.nav-link 必须是 .nav-item 的**直接子元素**。如果中间塞了个
<div>或<span>，.active就失效 - CSS 加载顺序错：自定义样式必须在 Bootstrap CSS 之后引入，否则原生规则会盖掉你的
下拉菜单的 .active 该加在谁身上
下拉项激活态不是加在菜单容器上，也不是加在 .dropdown-menu 里某条 <li> 上，而是加在触发按钮本身——即那个带 .dropdown-toggle 的 <a> 或 <button>。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<a class="nav-link dropdown-toggle active" href="#" aria-current="page">Products</a> - ❌ 错误：
<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”这个入口是否代表当前上下文），这时候靠路径字符串对比往往不准，得结合业务状态来判断。
