我知道Bootstrap4是如何做到的，但同样的方法在Bootstrap vue 中不起作用
这是我的主页.vue文件中的代码：
<template>
<div class="forVue">
<div>
<b-navbar toggleable="sm" type="dark" variant="dark">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="mx-auto">
<b-nav-item href="/home">Home</b-nav-item>
<b-nav-item href="/home">Services</b-nav-item>
<b-nav-item href="/home">Contact</b-nav-item>
<b-nav-item href="/about">About Us</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</div>
</template>
以下是我在同一文件中的CSS内部样式标记
<style>
.nav-item {
color: red !important;
}
</style>
这不起作用，颜色仍然是默认的。我也无法理解如何在不使用的情况下指定导航栏来更改整个导航栏的颜色！重要标签。它使用以下代码：
.navbar {
background-color: red !important;
}
如果没有！重要标签？
要摆脱!important，只需编写一个比当前应用的选择器更具体的选择器。
在BoostrapVue中，.nav-link颜色似乎具有3 × class的特异性，这意味着3 × class + 1 × el将满足：
.nav-item.nav-item.nav-item a {
color: red;
}
注意：如果你发现必须多次重复类选择器很麻烦，并且在CSS中生成了太多样板代码，我经常使用的一个技巧是用1 × id:人为地夸大我的选择器的特异性
#app .nav-item a { color: red }
另一个注意事项是，你甚至不需要有祖先id，因为这也可以：
body:not(#_) .nav-item a {
color: red;
}
假设您的<body>元素没有id="_"。
在scss中，它变得更加简单，因为您所需要做的就是将当前代码封装到body:not(#_) { ...current code ... }中。
随着时间的推移，我收到了一些评论，认为这种技术和使用!important一样糟糕，因为它还混淆了特定性，当当前的选择器需要重写时，你最终会陷入同样的游戏，使编写更强大的选择器变得越来越困难。
我对此的回应是，游戏规则实际上是由CSS的工作方式决定的。我没有制定规则，我只是在玩游戏。但最重要的是，通过不使用!important，我允许JavaScript驱动的样式优先，这就是为什么使用!important是不好的做法的最重要原因。
这类问题的一个更通用的答案是：检查您的元素，找出应用当前值的规则，然后写一个稍微更具体的规则(如果您将其放置在组件的<style>标记中，则写一个同样具体的规则，因为它是最后应用的(。
请注意，您的代码必须位于而不是scoped的<style>标记中。如果是scoped，则使用/deep/、::v-deep或>>>前缀应该可以工作，但Vue中最近的一个尚未解决的错误会破坏使用lang="scss"的<style>标签中的穿孔选择器，如果您的sass-loader高于7.*(当前最新版本：8.0.2(。实际上，这意味着以下内容将起作用：
<style scoped lang="css">
/deep/ .nav-item.nav-item.nav-item a {
color: red;
}
</style>
(其中lang="css"是可选的，因为它是默认的(，而
<style scoped lang="scss">
/deep/ .nav-item.nav-item.nav-item a {
color: red;
}
</style>
将不工作。
然而，这是一个(不同的(错误，它可能很快就会得到修复，届时我将删除我答案的这一部分。
如果您想将配色方案更改为red变体，您可以简单地使用variant="danger"，如：
<b-navbar toggleable="sm" type="dark" variant="danger">
<b-navbar>支持标准Bootstrap v4可用的背景色变体。将variant道具设置为以下值之一以更改背景颜色：primary、success、info、warning、danger、dark或light。
new Vue({
el: '#app'
})#app { padding: 20px;}.navbar{margin-bottom:10px}<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
<b-navbar toggleable="sm" type="dark" variant="dark">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="mx-auto">
<b-nav-item href="/home">Home</b-nav-item>
<b-nav-item href="/home">Services</b-nav-item>
<b-nav-item href="/home">Contact</b-nav-item>
<b-nav-item href="/about">About Us</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-navbar toggleable="sm" type="dark" variant="danger">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="mx-auto">
<b-nav-item href="/home">Home</b-nav-item>
<b-nav-item href="/home">Services</b-nav-item>
<b-nav-item href="/home">Contact</b-nav-item>
<b-nav-item href="/about">About Us</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-navbar toggleable="sm" type="dark" variant="primary">
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="mx-auto">
<b-nav-item href="/home">Home</b-nav-item>
<b-nav-item href="/home">Services</b-nav-item>
<b-nav-item href="/home">Contact</b-nav-item>
<b-nav-item href="/about">About Us</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>