如何修改Bootstrap 5导航栏文本的悬停颜色

我想修改导航栏中文本的悬停颜色，导航栏背景为黑色（#121212），文本默认颜色设为#b3b3b3，希望鼠标悬停时文本变为白色，但尝试的CSS均未生效。以下是我的HTML代码：

<nav class="navbar navbar-expand-lg" style="background-color: #121212">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" aria-current="page" href="#">Home</a>
            <a class="nav-link" aria-current="page" href="#">Home</a>
            <a class="nav-link" aria-current="page" href="#">Home</a>
            <a class="nav-link" aria-current="page" href="#">Home</a>
          </div>
        </div>
      </div>
</nav>

解决办法 #

问题出在Bootstrap默认样式的优先级比你自定义的CSS高，导致你的样式被覆盖。可以通过以下方式解决：

1. 使用更具体的选择器 #

通过精准的选择器提升样式优先级，确保能覆盖Bootstrap的默认设置：

.navbar-nav .nav-link {
  color: #b3b3b3; /* 设置默认文本颜色 */
}

.navbar-nav .nav-link:hover {
  color: #ffffff; /* 悬停时切换为白色 */
}

2. 调整CSS引入顺序 #

确保你的自定义CSS文件是在Bootstrap的CSS文件之后引入的，这样后加载的样式会覆盖先加载的默认样式。

3. 应急方案：使用!important（不推荐长期使用） #

如果上述方法仍不生效，可以临时用!important强制覆盖，但这种方式会破坏样式优先级的正常逻辑，建议优先用前两种方法：

.nav-link:hover {
  color: #ffffff !important;
}

内容的提问来源于stack exchange，提问作者Narton