父/祖先元素的CSS否定伪类：not（）

Question

这让我发疯：

HTML：

<div><h1>Hello World!</h1></div>

CSS：

*:not(div) h1 { color: #900; }

这不是读到“选择所有h1祖先不是div元素的元素吗？”。因此，“ Hello World！” 不应显示为红色，但仍然是。

对于上述标记，添加子组合器的工作原理是：

*:not(div) > h1 { color: #900; }

但是，h1如果它不是div元素的子元素，则不会影响元素。例如：

<div><article><h1>Hello World!</h1></article></div>

这就是为什么我想将h1元素表示为元素的后代而不是子div元素。任何人？

Answer 1

这不是读到“选择所有h1祖先不是div元素的元素吗？”。

是的 但是在一个典型的HTML文档中， 每个 h1人至少都有两个不是div元素的祖先，而这些祖先就是bodyand html。

这是尝试使用:not()以下方法过滤祖先的问题：只是无法可靠地工作，尤其是当:not()不能被其他选择器（例如类型选择器或类选择器）限定时.foo:not(div)。只需将样式应用于所有h1元素并用覆盖它们，您将拥有更加轻松的时间div h1。

在选择器4中，:not()已进行增强，可以接受包含组合器（包括后代组合器）的完整复杂选择器。这是否会在快速配置文件来实现的（因而CSS）仍有待检验和证实，但一旦得以实施，那么你_将_可以使用它来排除某些祖先元素。由于选择器的工作方式，必须对元素本身（而不是祖先）进行取反才能可靠地工作，因此语法看起来会有些不同：

h1:not(div h1) { color: #900; }

任何熟悉jQuery的人都会很快指出，该选择器现在可以在jQuery中使用。这是选择器3:not()与jQuery之间的众多差异之一，选择:not()器4试图纠正这一差异。