无法执行`:not(.foo .bar)`答案

【问题标题】：Unable to do `:not(.foo .bar)`无法执行`:not(.foo .bar)`
【发布时间】：2014-09-23 20:30:56
【问题描述】：

为什么我不能div:not(.wrapper2 .exception)？ IE。除了.wrapper2 .exception之外的所有div。

HTML：

<div class="wrapper1">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi</p>
    </div>
</div>
<div class="wrapper2">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi</p>
    </div>
</div>

CSS：

div:not(.wrapper2 .exception) {
    background: blue;
    color: white;
}

【问题讨论】：

不清楚你在问什么。除了.wrapper2 .exception 或.wrapper2 和.exception 之外，您还想要那个？
嗨！除了.wrapper2 .exception 之外的所有 div 是的。谢谢。更新的问题。
这说明了原因：stackoverflow.com/questions/7403129/…

标签： css css-selectors

【解决方案1】：

你不能像这样组合not()选择器，一次只能进入一个选择器。

在.wrapper2 中选择除.exception 之外的所有div：

div:not(.wrapper2) div:not(.exception)

【讨论】：

你怎么知道 OP 不打算让它只适用于最后一个div，即.wrapper2 .exception。
你说得对，我误解了这个问题。更新了我的答案
谢谢你们，我真的很感激！
请注意，这仅在恰好有两个级别的 div 时才有效 - 再多，它将无法正常工作。见stackoverflow.com/questions/20869061/…
看来 BoltClock 和 Fabrizio Calderan 是对的。回想起来，我认为 Marc 下面的答案更好。

【解决方案2】：

如果您要定位除最后一个之外的所有子 div，则需要这样做。

div > div {
    background: blue;
    color: white;
}
div.wrapper2 > div.exception {
    background: none;
    color: inherit;
}

<div class="wrapper1">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi</p>
    </div>
</div>
<div class="wrapper2">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi - not this one!</p>
    </div>
</div>

【讨论】：