直接修改 .nav-link.active 没有反应，这类问题在 Bootstrap 项目中几乎每天都会遇到。并非 CSS 代码写错了，而是选择器权重不足导致的。Bootstrap 5 默认使用 .nav-tabs .nav-link.active 或 .nav-pills .nav-link.active 来控制标签页的激活状态，如果只写一个 .nav-link.active，浏览器无法正确识别。典型表现是：点击后背景色不变，hover 效果明明存在，但激活状态就是灰色；或者加了 !important 只对部分属性生效，换个属性又出现异常。
为什么直接改 .nav-link.active 没反应
- 必须使用高权重组合选择器：
.nav-tabs .nav-link.active（顶部横排标签页）或.nav-pills .nav-link.active（胶囊式标签页），遗漏其中任何一个类型都会导致样式失效。 - 不能只修改
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 类驱动，JavaScript 只负责增删 show 和 active。要添加阴影过渡效果，不能改动 JavaScript，只能覆盖 .tab-pane.fade 及其 .show 状态。这里有几个关键点：
- 确保每个
tab-pane都包含fade类 —— 缺少它，JavaScript 就会认为"不需要动画"，连淡入淡出效果都会失效。 - 默认状态（未激活）设置为：
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（JavaScript 会自动管理show/active）。 .tab-content必须添加overflow: hidden，否则偏移的transform内容会"露出来"。- 谨慎使用
transform: translateZ(0)强制 GPU 加速 —— 部分低端 Android 设备反而更卡，优先使用opacity + transform组合。 - 动态插入新的
tab-pane后，立即手动添加fade类，再调用.show()，否则会直接硬切换，没有任何动画效果。
真正棘手的从来不是添加阴影或修改颜色，而是类名是否完整、选择器权重是否足够、fade 是否遗漏 —— 这些环节一旦出错，效果就会在看不见的地方中断。
