直接改.nav-link.active没反应是因为选择器权重不足且未完整覆盖样式属性；必须用.nav-tabs .nav-link.active或.nav-pills .nav-link.active等高特异性选择器，同时设置background-color、border-color、color及border-bottom的width/style/color，并补充:focus-visible和确保tab-pane含show类。
直接改 .nav-link.active 没反应，是因为选择器权重不够，且没覆盖完整样式属性。必须用高特异性选择器，同时处理背景、边框、文字色三者，否则只改其中一项会残留默认效果。
为什么 .nav-link.active 单独写无效？
Bootstrap 5 默认用 .nav-tabs .nav-link.active 和 .nav-pills .nav-link.active 控制激活态，这两个组合选择器的权重远高于你写的单类名规则。浏览器按“谁更具体谁赢”执行层叠，不是“谁在后面谁生效”。
- 常见现象：
background-color改了但文字还是灰色，或边框颜色变了但粗细没变 - 错误写法：
.nav-link.active { background: blue; }—— 权重不足，被 Bootstrap 原生规则压掉 - 正确写法：
.nav-tabs .nav-link.active（用于顶部横排 tab）或.nav-pills .nav-link.active（用于胶囊形 tab），二者不能省略任一
怎么改背景色 + 边框底线？
nav-tabs 的激活底线是 border-bottom，不是伪元素；要让它显出来，得同时设置颜色、宽度、样式，还要防父容器背景遮挡。
-
border-bottom-color和border-bottom-width必须一起写，只设 color 不行（默认 width 是 0） - 如果
.nav-tabs有浅灰背景，可能盖住细线，建议把background-color显式设为透明或同色系 - 移动端小屏下
nav-link高度压缩，border-bottom容易被截断，加padding-bottom: 2px预留空间 - 示例：
.nav-tabs .nav-link.active { background-color: #0d6efd !important; color: #fff !important; border-color: #0d6efd !important; border-bottom: 3px solid #0d6efd !important; }
移动端和键盘导航容易漏掉什么？
点击后高亮“消失”，或者 Tab 键切换时看不到焦点，通常不是样式没写，而是没覆盖全交互状态。
-
tab-pane必须同时含fade和show类，否则内容不可见，视觉上像没激活 - 仅处理
.active不够：键盘用户用 Tab 键聚焦时触发的是:focus-visible，不是.active - 必须补上：
.nav-tabs .nav-link:focus-visible，颜色可与.active一致，但不能省 - 如果用了 JS 手动切换 tab，确保触发了
shown.bs.tab事件，否则show类不会自动加到对应tab-pane
最常被忽略的是 :focus-visible 和 show 类的配合——前者影响可访问性合规，后者决定内容是否真显示出来。改样式前先打开开发者工具，确认目标元素上确实存在 .active 和对应 tab-pane.show，再调 CSS，不然纯属白改。
