直接写 .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 5 的 DOM 结构里，.active 类通常加在 .nav-item 上，而文字颜色控制在 .nav-link 元素上。所以 .active 单独写根本匹配不到链接文本——它没被选中。
更麻烦的是：浏览器对 a:visited 有强默认行为（点过变紫），哪怕你写了 .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，还要确认--bs-navbar-active-color是否被覆盖（见下一条）
用 CSS 变量覆盖比写死颜色更稳（Bootstrap 5.2+）
Bootstrap 5.2 起正式支持 --bs-navbar-active-color 变量，改一处，所有 .nav-link.active 自动响应，包括深色模式切换场景。硬写 color: #dc3545 !important 容易和主题逻辑打架。
只需在 <head> 或全局样式开头加：
立即学习“前端免费学习笔记（深入）”；
:root {
--bs-navbar-active-color: #dc3545;
}
注意两点：
- 该变量只影响 Bootstrap 内部用到它的组件（如
.nav-link、.dropdown-item），原生a标签不在此列 - 如果项目用了旧版 Bootstrap（5.0–5.1），这个变量无效，得退回选择器方案
Vue / React 项目里样式不生效？检查 scoped 和 class 注入时机
Vue 单文件组件加了 scoped，CSS 不会穿透到子组件生成的 .nav-link；React Router 的 NavLink 默认加的可能是 active（无点号）或 active 类名，但实际 DOM 结构未必是 .nav-item.active .nav-link。
- Vue 中用
::v-deep(.nav-item.active .nav-link)或移出 scoped 块 - React 中查 DevTools 真实 class 名，常见是
active加在<a>上，此时应写.nav-link.active而非带父级路径 - 单页应用路由切换后，JS 没手动更新
.active类——得监听路由变化并调用element.classList.add("active")
别漏掉焦点和点击态：只改 .active 还不够
键盘用户靠 :focus 知道当前聚焦在哪，移动端点击瞬间靠 :active 给反馈。Bootstrap 5 默认没给 .nav-link:active 设颜色，结果一按就闪回蓝色。
补全这三者才完整：
.nav-item.active .nav-link,
.nav-item.active .nav-link:focus,
.nav-item.active .nav-link:active {
color: #1e40af !important;
}
重点：
-
:focus必须写，否则可访问性失败 -
:active在移动端 Safari 需要tabindex="0"配合才能触发 - 如果导航含下拉菜单，
.dropdown-item.active是另一套规则，得单独处理
真正难的不是写几行 CSS，而是搞清当前激活态由谁控制：是 JS 动态加的类？是框架自动注入的？还是 CSS 变量驱动的？先定位来源，再选对应解法，否则永远在试错。
