CSS3：不（）选择来测试父的类(css3 :not() selector to test pare

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

<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>不具备类.active 。

我已经试过这样的事情：

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

但无济于事。有没有办法做到这一点还是我找错了树？

组合子如> ， +和后代空间不内允许:not()在CSS; 他们只允许作为jQuery选择。你可以找到更多在此的其他问题。

这就是说，你可以使用: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没有活动类。有了这些信息，你可以构建一个选择像上面的一个，应该按预期工作。