选择引导程序活动选项卡标题以进行自定义样式

问题描述

我有一组导航标签，我希望在其中对活动标签进行着色（当前的活动样式太微妙）。标签结构大致如下：

<ol id="event-headers" class="nav nav-tabs col-md-3 flex-column">
    <li class="nav-item">
        <a class="nav-link active" href="#event-0" data-toggle="tab">Event #1</a>
    </li>
</ol>
<div id="event-bodies" class="tab-content col-md-9">
    <div class="tab-pane active" id="event-0">

我希望活动标签页头（）具有背景色。我当前的CSS是：

.nav-link.active{
    background-color: black;
}

但是它什么也没做。我已经确认，对该元素上的样式进行硬编码确实可以改变颜色，只是找不到我的选择器中的元素或其他东西。似乎应该很简单，但是我不知道为什么它不起作用。我认为这是一个微不足道的错误，我会因不追赶自己而诅咒自己。

解决方法

尝试将！important与css属性一起使用，如下面的代码。

.nav-link.active {
  color: white !important;
  background-color: black !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<ol id="event-headers" class="nav nav-tabs col-md-3 flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#event-0" data-toggle="tab">Event #1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#event-1" data-toggle="tab">Event #2</a>
  </li>
</ol>