CSS - 在保留颜色的同时更改导航栏的活动状态

Question

我有一个 CSS nav 属性，用于我网站上的导航栏。导航栏上的每一项都有不同的下边框颜色，相关代码如下：

nav li.active a, nav li.active a:hover, nav a:active {
  border-bottom: 3px solid #48a9c0;
  <!--This code makes the nav bar item appear highlighted-->
  background: #323637;
  background-image: -webkit-linear-gradient(top, #484e4f, #323637);
  background-image: -moz-linear-gradient(top, #484e4f, #323637);
  background-image: -o-linear-gradient(top, #484e4f, #323637);
  background-image: linear-gradient(to bottom, #484e4f, #323637);
}

nav li.blue a, nav li.blue a:active {
  border-bottom-color: #48a9c0;

nav li.green a, nav li.green a:active {
  border-bottom-color: #56c93d;
}
nav li.red a, nav li.red a:active {
  border-bottom-color: #a54e49;
}

这就是我在我的 HTML 文件中实现它的方式：

<ul>
  <li class="active"><a href="index.html">Home</a></li>
  <li class="green"><a href="page2.html">Page 2</a></li>
  <li class="red"><a href="page3.html">Page 3</a></li>
</ul>

我的问题是，每当我将 <li> 项目的类设置为“活动”时，底部栏总是蓝色的。如何修改我的 CSS 代码以允许导航项的两种状态：活动/突出显示状态和正常状态（都具有相同的底栏颜色）。这是我第一次直接使用 CSS，所以请放轻松 ;)

Answer 1

我认为您可能将<a> 的活动状态与添加到<li> 元素的活动类混淆了。请参阅我认为您的意思的这种解释：http://codepen.io/astrotim/pen/keiud

对于这个 HTML（我复制了每个导航项以表示添加的“活动”类）

<nav>
  <ul>
    <li class="blue"><a href="#">Normal</a></li>
    <li class="green"><a href="#">Normal</a></li>
    <li class="red"><a href="#">Normal</a></li>
    <li class="blue active"><a href="#">Active</a></li>
    <li class="green active"><a href="#">Active</a></li>
    <li class="red active"><a href="#">Active</a></li>
  </ul>
</nav>

我会使用这个 CSS（注意链接在一起的 CSS 类，例如：.blue.active）

nav li a,
nav li a:hover,
nav li a:active {
  background: #999;
  border-bottom: 3px solid #48a9c0;  
}

nav li.active a, 
nav li.active a:hover, 
nav li.active a:active {
  background: #323637;
}

nav li.blue a, 
nav li.blue.active a {
  border-bottom-color: #48a9c0;
}
nav li.green a, 
nav li.green.active a {
  border-bottom-color: #56c93d;
}
nav li.red a, 
nav li.red.active a {
  border-bottom-color: #a54e49;
}