Bootstrap Vue b-tab:CSS似乎不适用于活动导航项类

Question

我正在Bootstrap Vue中试用选项卡。我正在尝试调整活动选项卡上的样式https://bootstrap-vue.org/docs/components/tabs#active-类，我看到了这个改变活动选项卡样式的例子。我知道我要修改活动导航项目类属性，比如：

<b-tabs
active-nav-item-class="font-weight-bold text-success"
active-tab-class="font-weight-bold text-success"
content-class="mt-3"
>

在我的JSFiddle中，您可以在https://jsfiddle.net/b4o1kL2f/1/，我同样试图通过将活动导航项类与Vue:绑定，将其设置为CSS中的类样式

<b-tabs  pills vertical :active-nav-item-class="'tab-active-class'">

这是CSS：

.tab-active-class {
background-color: red;
}

但活动选项卡的背景颜色似乎没有改变。有人能发现我可能做错了什么吗？非常感谢！

Answer 1

该类正在应用于HTML元素，但问题是.nav-link.active比.tab-active-class具有更高的特异性，因此必须增加.tab-active-class的特异性

.nav-link.active.tab-active-class {
background-color: red;
}

或

.tab-active-class {
background-color: red !important;
}