53

我有一个无序列表，使用引导程序“选项卡”插件。代码如下所示：

<ul>
  <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li>
  <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li>
  <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li>
  <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li>
</ul>

我想使用 CSS3 来更改<a>其父<li>级没有 class的所有链接的颜色.active。

我试过这样的事情：

 a:not(li.active>a){
    color:grey;
}

但无济于事。有什么办法可以做到这一点，还是我叫错了树？

4

1 回答 1

67

CSS中不允许使用>,和后代空间等组合符；它们只允许作为 jQuery 选择器。您可以在其他问题中找到更多信息。+:not()

也就是说，您可以单独使用:not()，li然后将零件移出> a；但这将取决于您的ul和li元素的结构：

li:not(.active) > a {
    color: grey;
}

例如，您始终可以链接其他选择器，例如，.span3如果您想将其限制为仅具有该类父级的a元素：li

li.span3:not(.active) > a {
    color: grey;
}

但是请记住，:not()如果您可以控制标记或结构至少是可预测的（例如，您知道父母是什么类型的元素），您只能依靠这种方式使用。例如，在您的情况下，您仅在没有活动类时才查看li.span3 > a和应用样式。li.span3有了这些信息，您可以构建一个类似上述之一的选择器，它应该可以按预期工作。

于 2013-01-10T05:59:51.847 回答