如何将导航栏的背景颜色更改为不同的颜色

Question

我将如何更改每个家庭项目等的背景颜色？

我已经能够更改第一个家庭导航，但似乎无法弄清楚如何更改其余部分，我认为这与第一个孩子，第二个孩子等有关，只学习了几个月，任何帮助都会很棒。

Answer 1

首先创建一个类： .nav-justified > li > a{ background-image: none; }

然后对于你的每个家....项目 etc 选项卡，创建一个唯一的类，然后将您的背景颜色传递到那里并将背景图像设置为 none。

.nav-justified > li.project-tab > a{
  background-color: #1da1f2;
  background-image: none;
  }

<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
          <ul class="nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li class="project-tab"><a href="#">Projects</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Downloads</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>