CSS css3 :not() 选择器来测试父类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14251393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 :not() selector to test parent's class
提问by JVG
I have an unordered list, using bootstraps "tabs" plugin. The code looks like this:
我有一个无序列表，使用引导程序“选项卡”插件。代码如下所示：
<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>
I'd like to use CSS3 to change the colour of all the <a>links whose parent <li>DOESN'T have the class .active.
我想使用 CSS3 更改<a>其父<li>级没有 class的所有链接的颜色.active。
I've tried something like this:
我试过这样的事情：
a:not(li.active>a){
color:grey;
}
but to no avail. Is there any way to do this or am I barking up the wrong tree?
但无济于事。有什么办法可以做到这一点，还是我吠错了树？
回答by BoltClock
Combinators such as >, +and space for descendant aren't allowed within :not()in CSS; they're only allowed as a jQuery selector. You can find out more in this other question.
CSS 中不允许使用诸如>,+和后代空格之类的组合:not()符；它们只允许作为 jQuery 选择器。您可以在另一个问题中找到更多信息。
That said, you may be able to use :not()on the lialone, and move out the > apart; however this will depend on the structure of your uland lielements:
这就是说，你可能能够使用:not()的li孤独，迁出> a部分; 但是，这将取决于您ul和li元素的结构：
li:not(.active) > a {
color: grey;
}
For example, you can always chain other selectors, such as .span3if you want to limit it to aelements with liparents of that class only:
例如，您始终可以链接其他选择器，例如，.span3如果您想将其限制为仅a具有li该类的父级的元素：
li.span3:not(.active) > a {
color: grey;
}
Keep in mind, though, that you can only rely on using :not()in this manner if you have control over the markup or the structure is at least predictable (e.g. you know what kind of elements the parents are). In your case for example, you're only looking at li.span3 > a, and applying styles only when the li.span3does not have the active class. With this information you can construct a selector like one of the above, which shouldwork as expected.
但是请记住，:not()如果您可以控制标记或结构至少是可预测的（例如，您知道父元素是什么类型的元素），则只能依赖于以这种方式使用。例如，在您的情况下，您只查看li.span3 > a, 并且仅在li.span3没有活动类时应用样式。有了这些信息，您就可以构建一个类似于上述之一的选择器，它应该可以按预期工作。
