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

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

1 个答案: