0

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

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，所以请放轻松；）

4

1 回答 1

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;
}
于 2013-07-26T01:51:21.850 回答