CSS 不适用于 vue 3 项目中默认选择的导航链接，引导程序 5

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/bootstrap@4.3.1/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

使用锚定标签访问和:而不是button

example :

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