更改活动导航项的颜色

Question

我在Bootstrap中设计了一个导航栏navbar。当nav-item的类别设置为active时，我试图将其变成不同的颜色。

然而，我无法做到这一点。当我设置background时，背景颜色会改变，但是当我使用color时，颜色不会改变。请注意，我正在使用Bootstrap v4。

$(document).ready(function() {
  "use strict";

  $('ul.navbar-nav > li').click(function(e) {
    e.preventDefault();
    $('ul.navbar-nav > li').removeClass('active');
    $(this).addClass('active');
  });
});

.navbar-toggler:focus {
  outline: 0;
}
.navbar-nav > .active {
  color: aqua!important;  **// THIS DOES NOT WORK**
  background-color: chartreuse; **//THIS WORKS**
}
.nav-item > a:hover {
  color: aqua!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span>
  </button>
  <h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
  <div class="collapse animated fadeInLeft" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

- Rehan

---

你可以使用以下代码更改所选导航项的颜色：.active a { color : aqua; } - Zeeshan Mahboob

Answer 1

问题出在 .nav-item > a:hover 这个选择器比 .navbar-nav > .active 更加具体。为了解决这个问题，应该删除 !important 操作符（因为应该尽量避免使用它），并让你想要覆盖的规则更加具体。

.navbar-nav > .active > a {
  color: aqua;
  background-color: chartreuse;    
}
.nav-item > a:hover {
  color: aqua;
}

$(document).ready(function() {
  "use strict";

  $('ul.navbar-nav > li').click(function(e) {
    e.preventDefault();
    $('ul.navbar-nav > li').removeClass('active');
    $(this).addClass('active');
  });
});

.navbar-nav > .active > a {
  color: aqua;
  background-color: chartreuse;
}
.nav-item > a:hover {
  color: aqua;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<ul class="navbar-nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a> 
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a> 
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a> 
  </li>
</ul>

- Rory McCrossan

Answer 2

尝试在 a 标签上使用添加颜色的 CSS：

.navbar-nav > .active  a{
    color : aqua;
}

.navbar-toggler:focus {
  outline: 0;
}

.navbar-nav>.active {
  color: aqua!important;
  ** // THIS DOES NOT WORK**
  background-color: chartreuse;
  ** //THIS WORKS**
}

.navbar-nav>.active a {
  color: aqua
}

.nav-item>a:hover {
  color: aqua!important;
}

ul li {
  list-style: none;
  margin: 10px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span></button>
  <h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
  <div class="collapse1 animated fadeInLeft" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
      <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
    </ul>
  </div>
</nav>

- Mukesh Ram

Answer 3

.nav-bar .nav-link.active {
  background-color: #color;
  !important;
}

- udorb b

Answer 4

.nav-link:focus {
  color: aqua !important;
}

- Guilherme Gosse

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P

Answer 5

.active a{
  color: red !important;
}

这应该适用于覆盖自定义的Bootstrap 4主题。

- Gmoney Mozart