CSS/Bootstrap 无法更改药丸颜色

Question

当通过引导程序使用导航栏药丸时，我无法在我的导航栏元素上更改背景颜色或文本颜色。

如果我删除药丸元素，颜色会正常工作。我得到了带有白色文本的默认蓝色药丸——尽管粗体元素正在悬停。

a:hover {
    font-weight: 900;
  }
a:link {
    color: blue;
    text-decoration: underline;
}
a:visited {
    color: green;
}
a.active {
    color: #df4759;
    background-color: #323232;
    text-decoration: none;
}

<!-- Nav -->
<nav class="nav-pills navbar navbar-expand-sm">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="menu.html">Menu</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="">Contact Us</a>
        </li>
    </ul>
</nav>

Answer 1

试试这个。

  a:hover {
      font-weight: 900;
  }
  a:link {
      color: blue !important;
      text-decoration: underline;
  }
  a:visited {
      color: green;
  }
  a.active {
      color: #df4759 !important;
      background-color: #323232 !important;
      text-decoration: none;
  }

Answer 2

您不必使用!important。虽然在这种情况下它确实完成了工作，但它的使用是有争议的 (read more here)。您真正需要做的就是匹配引导样式声明的特殊性。如果您只是在浏览器中检查元素，您将看到使用的选择器是.nav-pills .nav-link.active。因此，您只需要使用相同的选择器来覆盖并确保您的样式在引导后加载。如果上述样式规则集仅适用于此导航，请考虑更新所有选择器，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<style>
  nav-pills .nav-link:hover {
    font-weight: 900;
  }
  
  .nav-pills .nav-link:link {
    color: blue;
    text-decoration: underline;
  }
  
  .nav-pills .nav-link:visited {
    color: green;
  }
  
  .nav-pills .nav-link.active {
    color: #df4759;
    background-color: #323232;
    text-decoration: none;
  }
</style>

<nav class="nav-pills navbar navbar-expand-sm">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="menu.html">Menu</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="">Contact Us</a>
    </li>
  </ul>
</nav>