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>本身与*:not(p)匹配，以及它必须是后代的条件它是<div>的。该样式仅应用于<blockquote>，但由<{1}}内的继承。

<p>元素本身仍然会反对否定，因此<p>本身仍然会从您的选择器中排除。它只是从其父级<p>元素继承文本颜色。

即使它的相对接近的祖先没有一个与选择器匹配，你也可以担心<blockquote>和html这样的元素 - 尽管你可能只是选择body选择器在一开始：

body

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

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

<p>

选择器级别4：是的，/* Apply to div and let all its descendants inherit */ div { color: red; } /* Remove it from div p */ div p { color: black; }确实已被增强，以接受包含组合器的完整复杂选择器。从本质上讲，这意味着（一旦浏览器开始实现它），您将能够编写以下选择器并使其完全符合您的要求：

:not()

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

Answer 2

颜色已分配给blockquote，然后由p继承。

:not(p)只是为了使样式不是直接应用。它们仍然是遗传的。

CSS：not（）选择器应该与远程后代一起使用吗？

2 个答案: