Question

我有一个.active课程，可以在li a申请当前页面。

但是我的样式主要是nav div，它一直在被覆盖。

#nav ul li a:link, #nav ul li a:visited {
    color: #BBBBBB;
}

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
    border-bottom: red solid 2px;
    padding-bottom: 4px;
    color: #fff;
}

我已经尝试了第二条规则的一些变化来尝试并取消第一条规则，但似乎都没有。（我最初没有id，但我知道id在级联中超过了一级）。也许我错过了一些非常基本的东西，或者我的第一条规则是愚蠢的过于具体？（我似乎总是遇到链接的这类问题，特别是）

Answer 1

您可以使用！important tag：

阻止CSS中的stye被覆盖

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
    border-bottom: red solid 2px;
    padding-bottom: 4px;
    color: #fff !important;
}

Answer 2

假设你有这样的标记：

<div id="nav">
  <ul>
    <li><a href="#">foo</a></li>
    <li><a href="#">foo</a></li>
    <li class="active"><a href="#">foo</a></li>
  </ul>
</div>

您的CSS似乎工作正常。

请参阅http://jsfiddle.net/X7eAw/1/

您可能需要添加

#nav ul li.active a

如果未应用active类，则强制使用特异性。然而，那个选择器可能有点过分了。

假设您的active元素上有li个班级。如果您将active应用于锚点，则规则应为：#nav ul li a.active:link

我的班级拒绝将其规则应用于列表

2 个答案: