.active { color: red; } 不生效，因为 Bootstrap 4 将 .active 类加在 上而非 ，须用 .nav-item.active .nav-link 及其 :visited 伪类，并注意主题前缀、!important、加载顺序与 JS 激活逻辑。
直接改 .active 类颜色通常无效，因为 Bootstrap 4 的导航结构里，.active 多数加在 <li> 上，而文字色实际由 .nav-link 控制；必须写对选择器路径，同时处理伪类和主题变量干扰。
为什么 .active { color: red; } 不生效？
Bootstrap 4 默认把 .active 类加在 <li class="nav-item"> 上，不是 <a></a> 标签本身。所以单纯写 .active 无法命中链接文字。
- 正确选择器应为
.nav-item.active .nav-link（注意空格，表示后代） - 若用了
.navbar-light，它会通过color: inherit让链接继承父级颜色，得显式重置color -
:visited伪类会强制覆盖颜色——哪怕你点了再刷新，链接也可能变紫，必须一并声明：.nav-item.active .nav-link:visited - 如果项目用了 MDBootstrap 或其他封装层，它可能额外加了
!important规则，你的样式得比它更具体或也加!important
.nav-item.active .nav-link 样式要怎么写才稳？
推荐用最小必要覆盖，避免全局污染。下面这段能跨多数场景生效：
.nav-item.active .nav-link,
.nav-item.active .nav-link:visited {
color: #16a34a !important;
}
-
!important在 Bootstrap 4 中仍是合理手段，因框架自身大量使用它，不加反而容易被压 - 别漏掉
:visited，否则用户点过一次后激活态就失效 - 若导航在深色背景上（比如
.navbar-dark），需额外加前缀：.navbar-dark .nav-item.active .nav-link，否则规则不匹配 - 不建议只改
a.active—— Bootstrap 4 原生不给<a></a>加.active，那是 Bootstrap 5+ 的写法
遇到路由切换后 .active 没自动更新怎么办？
Bootstrap 本身不管理激活态逻辑，全靠 JS 手动控制。常见于单页应用（React Router、Vue Router）。
立即学习“前端免费学习笔记（深入）”；
- React Router 的
NavLink默认加的是active类（非.active），要覆盖得写a.active或用className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'} - Vue Router 中，
<router-link></router-link>默认加router-link-exact-active和router-link-active，得对应写.router-link-active .nav-link - 纯 HTML 页面，得自己用 JS 判断当前 URL 并添加类：
document.querySelector('a[href="' + window.location.pathname + '"]').closest('.nav-item').classList.add('active')
还有几个容易被跳过的细节
激活态不只是“颜色变了”这么简单，键盘焦点、移动端反馈、下拉菜单二级项，都得同步考虑：
-
.nav-link.active:focus必须设置，否则键盘 Tab 到当前项时看不到高亮 - 如果导航含下拉菜单，
.dropdown-item.active是另一套样式，需单独写：.dropdown-item.active { color: #16a34a !important; } - 移动端点击瞬间的反馈由
:active控制，但 Bootstrap 4 默认没设，可加：.nav-link:active { color: #16a34a; }防止闪一下原色 - CSS 文件加载顺序很重要：你的自定义样式必须在 Bootstrap CSS 之后引入，否则规则根本不会被读取
