Vue3+Bootstrap5项目中默认选中的nav-link样式不生效问题

我希望高亮选中的nav-link，Middle和Big选项的样式切换正常，但第一个Small选项始终无法高亮：初始状态为黑色，切换其他选项后再切回Small仍无变化。已检查ID、类名并调整CSS顺序，但此问题仍存在，怀疑类名拼写错误但未找到，代码如下：

<template>
  <div >
    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button
          class="nav-link car-head active"
          id="nav-ssprinter-tab"
          data-bs-toggle="tab"
          data-bs-target="#nav-ssprinter"
          type="button"
          role="tab"
          aria-controls="nav-ssprinter"
          aria-selected="true"
        >Small
        </button>
        <button
          class="nav-link car-head"
          id="nav-msprinter-tab"
          data-bs-toggle="tab"
          data-bs-target="#nav-msprinter"
          type="button"
          role="tab"
          aria-controls="nav-msprinter"
          aria-selected="false"
        >
          Middle
        </button>
        <button
          class="nav-link car-head"
          id="nav-xlsprinter-tab"
          data-bs-toggle="tab"
          data-bs-target="#nav-xlsprinter"
          type="button"
          role="tab"
          aria-controls="nav-xlsprinter"
          aria-selected="false"
        >
          big
        </button>
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
      <div
        class="tab-pane fade show active"
        id="nav-ssprinter"
        role="tabpanel"
        aria-labelledby="nav-ssprinter-tab"
        tabindex="0"
      >
Small text
      </div>
      <div
        class="tab-pane fade"
        id="nav-msprinter"
        role="tabpanel"
        aria-labelledby="nav-msprinter-tab"
        tabindex="0"
      >
      medium text
      </div>
      <div
        class="tab-pane fade"
        id="nav-xlsprinter"
        role="tabpanel"
        aria-labelledby="nav-xlsprinter-tab"
        tabindex="0"
      >
      big text
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  methods: {},
};
</script>

<style>
.car-head{
color: black !important;
font-weight: bold !important;
}
 .car-head + .active {
  color: rgb(243, 158, 0) !important;
  background: rgb(220, 220, 220) !important;
}
</style>

你使用的CSS选择器 .car-head + .active 是相邻兄弟选择器，它仅会匹配紧接在.car-head元素之后的.active兄弟元素。但Small按钮的active类和car-head类属于同一个元素，因此该选择器对它完全无效。而Middle、Big按钮切换到active状态时，前一个兄弟元素恰好是.car-head元素，所以它们的样式能正常生效。

将样式中的 .car-head + .active 修改为 .car-head.active（移除加号，改为交集选择器），这样就能匹配同时拥有car-head和active类的元素，无论它处于什么位置：

.car-head{
  color: black !important;
  font-weight: bold !important;
}
.car-head.active {
  color: rgb(243, 158, 0) !important;
  background: rgb(220, 220, 220) !important;
}

修改完成后，Small选项的初始状态和切换返回时都会正确高亮，三个选项的样式切换均能正常工作。

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