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 {

  color: red;

}

/* Remove it from div p */

div p {

  color: black;

}

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

p:not(div p) {

  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）。