每个部分标题的 HTML 导航栏多种背景颜色

Question

HTML 分区:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li> 
      <a class="page-scroll" href="#services">Services</a>
    </li>
    <li>
      <a class="page-scroll" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="page-scroll" href="#about">About</a>
    </li>
    <li>
      <a class="page-scroll" href="#team">Team</a>
    </li>
    <li>
      <a class="page-scroll" href="#contact">Contact</a>
    </li>
   </ul>
 </div>

CSS 代码:

.navbar-custom .navbar-nav>.active>a {
  color:#fff;
  background-color:#fed136
}

你好，我有这个导航栏，当你向下滚动到网站的每个部分时，tob 栏(事件栏)中的部分名称将采用背景色(#fed136)。 我正在尝试做某事，但没有成功:向下滚动时，我希望每个部分都有特定的颜色，所以我不希望将一种背景颜色设置为默认颜色。 我尝试向每个部分添加和“id”，但没有用。

<a class="page-scroll" href="#services" id="serv_id">Services</a>
#serv_id.navbar-custom .navbar-nav>.active>a {background-color:red !important}

这是我尝试做的一个例子:http://www.rad-road.com/Capture.PNG http://www.rad-road.com/Capture2.PNG 有帮助吗？

Answer 1

当您使用 ID 时，您只需在 CSS 中指定即可。 ID 在页面上必须是唯一的。删除类后，它可以正常工作。

#serv_id {
  background-color: red;
}

<a class="page-scroll" href="#services" id="serv_id">Services</a>