直接写 .nav-link.active 没反应是因为 css 选择器权重不够，bootstrap 5 默认使用更具体的选择器如 .nav-tabs .nav-link.active 和 .nav-pills .nav-link.active 控制激活态样式。
为什么直接写 .nav-link.active 没反应？
不是选择器写错了，是权重不够。Bootstrap 5 默认用 .nav-tabs .nav-link.active 这种组合类控制激活态，浏览器按“谁更具体谁赢”规则，会忽略你写的简单选择器。常见现象：点了 tab，背景色没变；hover 有反应，.active 却还是灰色；加了 !important 但只对部分元素生效。
必须覆盖的两个核心选择器
Bootstrap 的 tab 激活态样式由 JS 动态控制，它只操作 .active 类——不是你自定义的 .tab-active 或 .is-selected。所以样式必须锚定在框架原生类上：
-
.nav-tabs .nav-link.active：用于顶部带下划线的 tab 样式 -
.nav-pills .nav-link.active：用于胶囊形侧边 tab 样式
漏掉任一，对应类型 tab 就不会变色。别只改 background-color，border-color 和 color 都得写全，否则边框或文字色可能残留默认值。
移动端和键盘焦点不能只靠 .active
用户用 Tab 键切换 tab 时，触发的是 :focus-visible，不是 .active。如果不处理，键盘用户看不到当前聚焦位置，WCAG 2.1 可访问性检测会失败。稳妥做法是统一三态：
-
.nav-tabs .nav-link.active（鼠标点击后持久状态） -
.nav-tabs .nav-link:focus-visible（键盘聚焦临时状态） -
.nav-tabs .nav-link:hover（悬停反馈，可选）
颜色可以和 .active 一致，但不能省略 :focus-visible。
用 CSS 变量统一改色更稳妥（Bootstrap 5.2+）
比起硬写颜色加 !important，推荐用 CSS 自定义属性：
:root {
--bs-nav-link-active-color: #dc3545;
}
注意：--bs-nav-link-active-color 是 Bootstrap 5.2+ 引入的变量，旧版本不支持，得回退到类选择器方案。另外，如果用了 navbar-dark 或 navbar-light，它们内部也依赖类似变量（如 --bs-navbar-active-color），需确认实际生效的上下文。
容易被忽略的是：改完样式后，得确保自定义 CSS 文件在 Bootstrap CSS 之后加载；服务端或 JS 动态生成 tab HTML 时，.active 必须加在正确的元素层级上（通常是 .nav-item 下的 .nav-link），否则样式根本匹配不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
