CSS：not（）选择器是否应该与遥远的后代一起工作？

Question

这是CSS3 :not()伪类的官方文档：

http : //www.w3.org/TR/css3-selectors/#negation

和建议的CSS选择器4级增强功能：http :

//dev.w3.org/csswg / selectors4 /＃negation

我一直在搜索的实现和浏览器支持:not()，但发现的唯一示例是单个元素或元素的直接子元素，例如：

div *:not(p) { color: red; }

上面的示例仅当<p>是的直接子代时有效<div>，而当<p>是的更远的子代时无效<div>。

div :not(p) {

    color: red;

}

<div>

    <ul>

        <li>This is red</li>

    </ul>

    <p>This is NOT</p>

    <blockquote><p>This is red but is not supposed to be!</p></blockquote>

</div>

如果答案在上面的官方文档中，那么我没有发现/理解。正如我所说，我已经搜索了该站点和网络，但是找不到关于：not（）作为另一个元素的后代的支持或缺乏的讨论。

这应该像我认为的那样工作吗？

Answer 1

这应该像我认为的那样工作吗？不，您看到的行为是正确的。在您的最后一个示例中，尽管<blockquote>包含一个<p>，但它<blockquote>本身是match *:not(p)，并且条件是它必须是的后代<div>。样式仅应用于<blockquote>，但随后由其内部继承<p>。该<p>元素本身仍然被反对否定，所以<p>本身仍然被排除在你的选择。它只是从其父<blockquote>元素继承文本颜色。即使它的相对祖先都不匹配选择器，您也有喜欢html和body担心的元素-尽管您可能一body开始就可以选择一个选择器：body div...这就是为什么我经常强烈建议您不要使用:not()选择器来过滤后代，尤其是在不使用类型选择器进行限定的情况下（例如div您的示例）。它不能像大多数人所期望的那样起作用，并且继承属性的使用color只会使问题更加复杂，而且会使作者更加困惑。有关更多示例，请参阅我对其他问题的回答：为什么CSS：not（）声明没有过滤掉？父/祖先元素的CSS否定伪类：not（）所描述问题的解决方案是简单地将不同的颜色应用于<p>元素。由于继承，您将无法使用选择器简单地排除它们：/* Apply to div and let all its descendants inherit */div {&nbsp; color: red;}/* Remove it from div p */div p {&nbsp; color: black;}关于选择器级别4：是的，:not()确实已得到增强，可以接受包含组合器的完整复杂选择器。本质上，这意味着（一旦浏览器开始实现它）您将能够编写以下选择器，并使它完全执行您想要的操作：p:not(div p) {&nbsp; color: red;}如果有人感兴趣，今天它可以在jQuery中使用。

Answer 2

颜色分配给blockquote，然后由继承p。:not(p)只是使其不直接应用样式。它们仍然是继承的。

Answer 3

:not()选择器忽略组合器-它仅对匹配的元素进行操作，而不检查它是否是另一个元素的直接或远距离后代。在以相同的方式div p.test将相匹配的元件的超集div > p.test将匹配（即p.test元素），div *:not(p)将也匹配匹配元素的一个超集div > *:not(p)（即是，即元素本身不p）。