CSS：
p {
color: red;
}
div:not(.exclude) p {
color: green;
}
HTML：
<div>
<div class="exclude">
<p>I should be red</p>
</div>
<div>
<p>I should be green</p>
</div>
</div>
最终结果是< p>是绿色的,但我原本预计第一个是红色的. Here’s a JSFiddle.
有趣的是,我找到了三种不同的方法来使它工作：
> Remove顶级< div>来自HTML
> Change顶级< div>到另一个元素(例如< section>)
> Add一个额外的div到第二个CSS选择器的开头(div div：not(.exclude)p)
另一个奇怪的方法来打破它：
>使用解决方案2作为基础,wrap另一个< div>围绕< section>
This selector only applies to one element; you cannot use it to exclude all ancestors. For instance,
body :not(table) awill still apply to links inside of a table,since<tr>will match with the:not()part of the selector.
这是有道理的,但我认为这不会发生在这里.由于< div class =“exclude”>之间没有任何内容和它的直接子< p>,它应该触发规则而不管它嵌套在里面.我错过了什么？如果有人能帮助我理解这一点,我真的很感激.
解决方法
Since there is nothing between
<div class="exclude">and its direct child<p>,it should trigger the rule regardless of what it is nested inside. What am I missing?
< p>是顶级< div>的后代.和< div class =“exclude”>.因此,虽然后者与选择器不匹配,但前者确实如此,因此您有匹配.无法匹配选择器的祖先更接近于< p>并且无关紧要.而不是那个.
解决方案1和2通过完全消除匹配来工作.
解决方案3在< p>的祖先中不存在其他< div>时起作用,因为这样您就可以按照确切的顺序将选择器限制为那些精确的条件.这意味着如果您从内部< div>交换了class属性对于外部的,它将不再匹配选择器,相反,如果您将类选择器从内部div交换到外部div,则选择器将与原始HTML结构不匹配(再次,假设没有其他< div> s存在于层次结构中).
包装另一个< div>围绕< section>只是让选择器再次被< div>匹配. <节>被忽略,与< div class =“exclude”>的方式大致相同.
也可以看看：
> CSS negation pseudo-class :not() for parent/ancestor elements
> Why doesn’t this CSS :not() declaration filter down?
> Is the CSS :not() selector supposed to work with distant descendants?
