直接改.nav-link.active没反应是因为选择器权重不足，必须用.nav-tabs .nav-link.active或.nav-pills .nav-link.active等高权重组合选择器，并同时覆盖background-color、border-color、color；移动端需确保tab-pane同时含fade和show类，且须补充:focus-visible以保障键盘导航可访问性。
为什么直接改 .nav-link.active 没反应？
不是 css 写错了，是选择器权重不够。bootstrap 5 默认用 .nav-tabs .nav-link.active 这种组合类控制激活态，而你如果只写 .nav-link.active 或 #mytab a.active，浏览器会按“谁更具体谁赢”规则忽略它。常见现象：点了 tab，背景色没变；hover 有反应，active 却还是灰色；加了 !important 但只对部分元素生效。
必须覆盖的两个核心选择器
Bootstrap 的 tab 激活态样式由 JS 动态控制，它只操作 .active 类——不是你自定义的 .tab-active 或 .is-selected。所以样式必须锚定在框架原生类上：
-
.nav-tabs .nav-link.active：用于nav-tabs样式（带下划线的顶部 tab） -
.nav-pills .nav-link.active：用于nav-pills样式（胶囊形侧边 tab）
漏掉任一，对应类型 tab 就不会变色。别用 !important 去压单个属性，而是整组覆盖：background-color、border-color、color 都得写全，否则边框或文字色可能残留默认值。
移动端点击后高亮消失？检查 tab-pane 类名
fade 动画和 active 状态是两套逻辑。如果你加了 fade 类但没加 show，或者用了 JS 切换但没触发 shown.bs.tab 事件，.nav-link.active 虽然存在，但对应内容区不可见，视觉上就像“没高亮”。确保每个 tab-pane 同时包含：
tab-panefade-
show（仅当前激活项）
否则动画不触发，JS 也不会补全 show，导致内容空白、高亮“失效”。
容易被忽略的兼容点：focus-visible 和键盘导航
单纯改 :active 或 .active 不够。用户用 Tab 键切换 tab 时，焦点会落在 .nav-link 上，此时触发的是 :focus-visible，不是 .active。如果不处理，键盘用户看不到当前聚焦位置。稳妥做法是统一三态：
-
.nav-tabs .nav-link.active（鼠标点击后持久状态） -
.nav-tabs .nav-link:focus-visible（键盘聚焦临时状态） -
.nav-tabs .nav-link:hover（悬停过渡态，可选）
尤其注意：不要删掉 :focus-visible 规则，否则 WCAG 2.1 可访问性检测会失败。颜色可以和 .active 一致，但不能省略。
