css - 我的类(class)拒绝将其规则应用于列表

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 在级联中比 class 高一级)。也许我遗漏了一些非常基本的东西，或者我的第一条规则愚蠢地过于具体了？ (具体来说，我似乎总是遇到这种链接问题)

Answer 1

假设您有这样的标记:

<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 类，则强制指定。然而，该选择器可能有点矫枉过正。

假设您的 li 元素上有 active 类。如果您将 active 应用于 anchor ，则规则应为:#nav ul li a.active:link