css3:not()选择器来测试父类

Question

我有一个无序的列表,使用bootstraps"tabs"插件.代码如下所示:

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

但无济于事.有没有办法做到这一点,还是我咆哮错误的树？

Answer 1

组合程序,如>,+和空间的后代都没有在允许: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没有活动类时才应用样式.使用此信息,您可以构建一个类似于上述之一的选择器,它应该按预期工作.