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

【问题标题】：css3 :not() selector to test parent's classcss3 :not() 选择器来测试父类
【发布时间】：2012-12-24 10:55:12
【问题描述】：

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

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

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

【问题讨论】：

目前 CSS 没有“父”选择器（虽然 CSS4 显然有这个能力）所以你可能想寻找另一个解决方案
这很烦人！我想我可以对li.active>a 应用一个特殊的样式，它会覆盖常规的a 样式，但如果我能找到父样式，我会更喜欢。哦，好吧！
@Explosion Pills：这里的代码不是试图选择父级；它试图根据父母匹配（或不匹配）的东西来选择孩子。父选择器无法解决此问题。
我不确定，但我认为 sizzlejs 允许您通过额外的伪类选择父母:has()

标签： css css-selectors

【解决方案1】：

>、+ 等组合符和后代空间在 CSS 中的 :not() 中是不允许的；它们只允许作为 jQuery 选择器。您可以在this other question 了解更多信息。

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

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

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

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

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

【讨论】：