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

Question

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

我一直在搜索的实现和浏览器支持: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只会使问题
更加 复杂，而且会使作者 更加 困惑。

所描述问题的解决方案是简单地将不同的颜色应用于<p>元素。由于继承，您将无法使用选择器简单地排除它们：

/* Apply to div and let all its descendants inherit */
div {
  color: red;
}

/* Remove it from div p */
div p {
  color: black;
}

关于选择器级别4：是的，:not()确实已得到增强，可以接受包含组合器的完整复杂选择器。本质上，这意味着（一旦浏览器开始实现它）您将能够编写以下选择器，并使它完全执行您想要的操作：

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

如果有人感兴趣，今天它可以在jQuery中使用。