活动类在引导导航栏上不能与 li 一起使用

Question

我正在尝试更改导航栏中活动li 的background-color。很奇怪，只是 background-color 属性不起作用。 这是我的代码 html:

<nav role="navigation" class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    @Html.ActionLink("Expand", "Index", null, new { @class = "navbar-brand hidden-md hidden-lg" })
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      @{string actionName = ViewContext.RouteData.Values["Action"].ToString();}
      <li class="@((actionName=="Index")?"active":"")"> @Html.ActionLink("Home", "Index", "Home")</li>
      <li class="@((actionName=="Destinations"||actionName=="Attractions")?"active":"") dropdown" role="presentation">
        <a class="dropbtn" id="dropdownMenu1" href="#">Destinations</a>
        <div class="dropdown-menu">
          @Html.ActionLink("Attractions", "Attractions", "Home", null, new { @class = "link" })
          @Html.ActionLink("Popular Destinations", "Destinations", "Home", null, new { @class = "link" })
        </div>
      </li>
      <li class="@((actionName=="Seasons")?"active":"")">@Html.ActionLink("Seasons", "Seasons", "Home")</li>
    </ul>
  </div>
</nav>

CSS

#navbarCollapse {
  background-color:#1dbbd3;
}

#navbarCollapse ul li.active {
  border:1px solid red;
  background-color:#7b278e;
  color:#f2f2f2;
}

#navbarCollapse li a {
  color:#f2f2f2;
}

#navbarCollapse li a:hover {
  background-color:#7b278e;
  color:#f2f2f2;
  font-weight:600;
}

只有background-color 不起作用，这真的很奇怪。甚至border:1px solid red 也在工作！请帮忙

Answer 1

我测试了您的标记和 CSS，发现以下 CSS 规则覆盖了您的 background-color：.navbar-default .navbar-nav > .active > a 和 background-color: #e7e7e7;