是否可以在 Bootstrap 5 中无需 CSS 即可更改活动链接颜色？

如何解决是否可以在 Bootstrap 5 中无需 CSS 即可更改活动链接颜色？

我有很长一段时间没有使用 HTML，这只是我第二次尝试创建选项卡，所以我可能会以错误的方式进行此操作。

然而，链接文本默认使用主引导程序颜色（蓝色），并在活动时变为深蓝色。 我可以将文本更改为单一颜色，但我不知道是否有办法为活动选项卡更改文本。比如说，我希望文本为灰色，但在该选项卡处于活动状态时为黑色。

我只能访问 HTML，所以我不确定这是否可能，或者我是否只是做错了。

 <!-- navigation -->
    <nav>
     <div class="nav nav-sm bg-faded rounded" role="tablist" style="font-size:15px;">
      <a class="nav-item  nav-link active" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true" style="">link 1</a>
      <a class="nav-item nav-link" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false" style="">link 2</a>
     </div>
    </nav>
    <!-- end navigation -->

解决方法

如果您想使用标准的 Bootstrap CSS 文件而不是使用 SASS 构建自己的文件，那么您可以通过在 HTML 页面的 head 部分定义样式来覆盖 Bootstrap 样式。

在下面的代码片段中，我将 active 标签的 Bootstrap 黑色覆盖为紫色，其他标签覆盖悬停状态的红色和绿色。

你只需要确保使用足够的[特异性](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity来覆盖现有的样式，或者使用! important。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>
    .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
        color: purple;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    a.nav-link {
        color: red;
    }

    a.nav-link:hover {
        color: green;
    }
</style>

<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
    </ul>
</div>