css 不适用于带有 bootstrap 5 的 vue 3 项目中默认选择的导航链接

Question

我是第一次，请耐心等待

我想突出显示选定的导航链接，它效果很好，但第一个（小）不突出显示。

即使我选择其他（中或大，确实改变颜色），并再次选择第一个（小），小也不会改变其颜色。

而且一开始也只是黑色。

这是我的代码，我正在使用 vue 并安装了 bootstrap

<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>

我已经检查了 id 和类，并更改了底部 css 部分的顺序， 它帮助解决了另一个问题，但没有解决这个问题。

我希望找到小导航链接的类名中的拼写错误，因为，我没有看到其他原因，它的颜色总是黑色，在开始时（默认选择）以及当我在选择其他内容后选择它时。

Answer 1

您正在使用

+

选择器，这意味着：选择相邻的下一个同级。所以这仅在某些情况下有效。

在您的示例中，我想您希望在具有

car-head

类时对

active

类进行样式设置。在这种情况下，您将需要使用此选择器组合：

.car-head.active

在此处阅读 CSS 选择器： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

或者在精彩的视频解释中： https://www.youtube.com/watch?v=l1mER1bV0N0

.car-head {
  color: black !important;
  font-weight: bold !important;
}

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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>

Answer 2

使用 锚标记 和 :visited 而不是按钮

example :

   

.car-head:visited{
   background-color : blue;
}