如何为同一页面的两个Bootstrap激活标签设置不同CSS样式

问题出在Bootstrap默认的.active选择器是全局生效的，所以你给它加样式会影响所有标签页的激活状态。要分别设置，得靠父容器自定义类+后代选择器来精准定位，提升CSS优先级，具体步骤如下：

1. 给两个标签页容器添加唯一自定义类 #

给每个标签页的外层容器（包裹nav和tab-content的div）分别加不同的类，比如tab-group-profile和tab-group-settings：

<!-- 第一个标签页 -->
<div class="tab-group-profile">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#profile-tab1">个人信息</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#profile-tab2">账号安全</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="profile-tab1">...</div>
    <div class="tab-pane" id="profile-tab2">...</div>
  </div>
</div>

<!-- 第二个标签页 -->
<div class="tab-group-settings">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#settings-tab1">基础设置</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#settings-tab2">通知设置</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="settings-tab1">...</div>
    <div class="tab-pane" id="settings-tab2">...</div>
  </div>
</div>

2. 编写针对性的CSS样式 #

通过父类的后代选择器，分别给两个标签页的激活状态设置样式，这样优先级会高于Bootstrap的全局样式：

/* 第一个标签页的激活标签样式 */
.tab-group-profile .nav-tabs .nav-link.active {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* 第二个标签页的激活标签样式 */
.tab-group-settings .nav-tabs .nav-link.active {
  background-color: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

/* 可选：修改激活面板的样式 */
.tab-group-profile .tab-content .tab-pane.active {
  border-top-color: #2563eb;
}

.tab-group-settings .tab-content .tab-pane.active {
  border-top-color: #16a34a;
}

为什么之前自定义类没生效？ #

大概率是CSS优先级不够——Bootstrap自带的.nav-tabs .nav-link.active选择器权重比你单独加的自定义类（比如.my-active）高，所以你的样式会被覆盖。用父容器类+后代选择器的方式，权重会超过Bootstrap的默认样式，就能生效了。

另外要注意：自定义类要加在标签页的外层容器，而不是直接加在.nav-link上，否则如果Bootstrap的JS切换状态时替换类，你的自定义样式可能会失效（当然也可以给.nav-link加自定义类，写.my-tab-link.active，但权重还是不如父类限定的方式可靠）。

内容的提问来源于stack exchange，提问作者SAI