css - 是CSS :not() selector supposed to work with distant descendants?

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

Is this supposed to work like I think it should?

不，您看到的行为是正确的。

在你的最后一个例子中，虽然 <blockquote>包含 <p> , 这是 <blockquote>本身匹配 *:not(p) ，以及它必须是 <div> 的后代的条件，它是。该样式仅应用于 <blockquote> , 但它随后被 <p> 继承里面。

<p>元素本身仍然算作否定，所以 <p>本身仍然被排除在您的选择器之外。它只是从其父项 <blockquote> 继承文本颜色元素。

即使它的相对接近的祖先都没有匹配选择器，您仍然有像 html 这样的元素和 body也要担心——尽管你可能只是加上一个 body开头的选择器:

body div...

这就是为什么我经常强烈建议不要使用 :not()用于过滤后代的选择器，尤其是当未使用类型选择器限定时(如您的示例中的 div)。它不像大多数人期望的那样工作，并且使用像 color 这样的继承属性只会使问题复杂化，甚至让作者更感到困惑。有关更多示例，请参阅我对这些其他问题的回答:

• Why doesn't this CSS :not() declaration filter down?
• CSS negation pseudo-class :not() for parent/ancestor elements

所描述问题的解决方案是简单地为 <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 中有效。