直接修改.nav-link.active无效是因选择器权重不足，须用.nav-tabs .nav-link.active或.nav-pills .nav-link.active；需同步覆盖background-color、border-color、color；还需补充:focus-visible以保障键盘导航可访问性；tab动画依赖.tab-pane.fade及.show类，须确保类名完整、overflow:hidden，并合理设置transition。
为什么直接改 .nav-link.active 没反应
不是 CSS 写错，是选择器权重不够。Bootstrap 5 默认用 .nav-tabs .nav-link.active 或 .nav-pills .nav-link.active 控制激活态，单写 .nav-link.active 会被浏览器忽略。常见现象：点击后背景色不变、hover 有效但 active 仍是灰色、加了 !important 却只对部分属性生效。
- 必须用高权重组合选择器：
.nav-tabs .nav-link.active（顶部横排 tab）或.nav-pills .nav-link.active（胶囊形 tab），漏掉任一类型就失效 - 不能只改
background-color——border-color和color也得同步覆盖，否则边框或文字残留默认值 - 别靠
!important压单个属性，整组声明一起写才稳定
.nav-link.active 需要同时处理 :focus-visible
键盘用户按 Tab 键切换时，焦点落在 .nav-link 上触发的是 :focus-visible，不是 .active。不处理它，键盘导航就看不到当前聚焦位置，可访问性直接掉线。
- 补上
.nav-tabs .nav-link:focus-visible规则，样式与.active保持一致（包括 background、border、color） - 移动端也要加，iOS Safari 和 Android Chrome 都支持
:focus-visible - 不要用
:focus替代 —— 它会在鼠标点击后也触发，造成冗余高亮
Tab 切换加阴影动画的关键是改 .tab-pane.fade
Bootstrap 5 的动画完全由 CSS 类驱动，JS 只负责增删 show 和 active。想加阴影过渡，不能动 JS，只能覆盖 .tab-pane.fade 及其 .show 状态。
- 确保每个
tab-pane都有fade类 —— 缺了它，JS 就当“不需要动画”，连淡入淡出都失效 - 默认状态（未激活）设为：
opacity: 0; transform: translateY(10px); box-shadow: none; -
.tab-pane.fade.show终态设为：opacity: 1; transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,0.1); - 过渡必须写在基础选择器上：
.tab-pane.fade { transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }，不能只写在.show里
移动端 Tab 高亮消失或动画卡顿的排查点
不是代码逻辑错，是 DOM 状态和 CSS 类没对齐。最常踩的坑是 tab-pane 类名缺失、父容器溢出没裁剪、或低端机硬件加速反拖慢。
- 默认激活的
tab-pane必须同时含fade、show、active；其他项只需fade（JS 会自动管show/active） -
.tab-content必须加overflow: hidden，否则偏移的transform内容会“露出来” - 慎用
transform: translateZ(0)强制 GPU 加速 —— 部分低端 Android 机反而更卡，优先用opacity + transform组合 - 动态插入新
tab-pane后，立刻手动加fade类，再调用.show()，否则就是硬切
fade 是否漏掉 —— 这些地方一错，效果就断在看不见的地方。
