直接写 .active { color: red; } 无效，因 Bootstrap 5 中 .active 类加在 .nav-item 上而非 .nav-link，且受 a:visited 默认样式、CSS 变量 --bs-navbar-active-color 及选择器特异性影响，须用 .nav-item.active .nav-link 等路径选择器并覆盖 :visited、:focus、:active。
为什么直接写 .active { color: red; } 没用
因为 bootstrap 4/5 默认把 .active 类加在 .nav-item 元素上，不是加在 <a> 标签（即 .nav-link）本身。所以只写 .active 根本选不到链接文字。
更麻烦的是：a:visited 会强制覆盖颜色——用户点过一次，再刷新页面，激活态就变紫了；.navbar-light 或 .navbar-dark 还会注入 CSS 变量（比如 --bs-navbar-active-color），优先级比普通类高。
- 必须用路径选择器，例如：
.nav-item.active .nav-link或.navbar-nav > .nav-item > .nav-link.active - 必须同时覆盖
:visited：.nav-item.active .nav-link:visited - 如果用了
.navbar-dark，还得额外加前缀：.navbar-dark .nav-item.active .nav-link
Bootstrap 4 和 5 的关键区别在哪
Bootstrap 4 中，.active 几乎总是加在 .nav-item 上，所以样式得靠后代选择器；而 Bootstrap 5.2+ 开始支持 --bs-navbar-active-color 变量，改一处就能全局生效，且适配深色模式切换。
- Bootstrap 4：老老实实用
.nav-item.active .nav-link { color: #16a34a !important; }，!important是合理手段（框架自己也大量用） - Bootstrap 5.2+：优先用变量覆盖，在
<head>里加：:root { --bs-navbar-active-color: #dc3545; } - Bootstrap 5.0–5.1：变量无效，退回选择器方案
- 别写
a.active——那是 Bootstrap 5+ 的可选写法，但原生结构仍倾向.nav-item.active
Vue / React 项目里为啥样式不生效
不是 CSS 写错了，而是 class 名没对上，或样式被隔离了。
- Vue 单文件组件加了
scoped，CSS 不会穿透到<router-link>渲染出的.nav-link，得用::v-deep或移出 scoped - React Router 的
NavLink默认加的是active（无点号）类名，不是.active；要用className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}手动注入 -
<router-link>在 Vue 中默认加的是router-link-exact-active，得写.router-link-exact-active .nav-link - 检查 DOM 实际结构：右键审查元素，确认
.active真的出现在.nav-item上，且.nav-link是它的直接子元素
JavaScript 切换 .active 容易踩什么坑
最常见错误是假设“总有一个已激活项”，结果 document.querySelector('.active') 返回 null，接着调用 classList.remove() 就报错。
- 安全写法：先查旧的，存在才 remove；再查新的，存在才 add
- 别给
.nav-item加.active后就不管了——下拉菜单的.dropdown-toggle必须自己加.active，.dropdown-menu上加没用 - 手动加
.active时，记得同步加aria-current="page"，这对屏幕阅读器更语义化 - 纯 HTML 页面判断当前路径，别只比
window.location.pathname，要处理结尾斜杠、查询参数等边界情况
