Question

我尝试更改导航栏中活动background-color的{{1}}。非常奇怪的是，只有li属性不起作用。这是我的代码 HTML：

background-color

的CSS

<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>

只是#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正在运作！请帮忙

Answer 1

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

活动类在bootstrap navbar上不与li一起使用

1 个答案: