更改导航丸的活动颜色

Question

这是我用来激活导航栏中的药丸的代码。

  <ul class="nav nav-pills">

  <li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>

但是它使用默认的蓝色作为 "active" 我应该如何更改它？

这是我 css 中已有的

.nav>li>a:hover,

.nav>li>a:focus{

 background-color: #5c8a36;}

即使这样（颜色应该是绿色）它仍然显示为默认的蓝色

Answer 1

将以下行 (.nav>li>a.active,) 添加到您的 css:

.nav>li>a.active,
.nav>li>a:hover,
.nav>li>a:focus {
   background-color: #5c8a36;
}

Answer 2

那里没有 <a>！

.nav>li:hover,
.nav>li:focus,
.nav>li:focus {
  background-color: #5c8a36;
}

<ul class="nav nav-pills">

  <li class="">
    Home
  </li>

</ul>

Answer 3

已接受的答案对我不起作用。我改变了一点，现在工作了。

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
   background-color: #5c8a36;
}

change active color of nav-pills