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

这使我疯狂：

HTML：

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

CSS：

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

这是不是读取“选择具有祖先不是一个div元素的所有h1元素…？” 因此，“Hello World！” 不应该被染成红色，但它仍然是。

对于上面的标记，添加子组合子的作品：

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

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

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

这就是为什么我希望将h1元素指定为div元素的后代，而不是子元素。任何人？

这是不是读取“选择具有祖先不是一个div元素的所有h1元素…？”

它确实。但是在一个典型的HTML文档中，每个 h1至少有两个不是div元素的祖先 – 而这些祖先不是body和html 。

这是尝试使用:not()过滤祖先的问题：它只是不能可靠地工作，特别是当:not()没有被某个其他选择器（如类型选择器或类选择器:not()限定时.foo:not(div) 。只需简单地将样式应用于所有h1元素，然后用div h1覆盖它们，您就会轻松得多。

在选择器4中， :not()已被增强以接受包含组合器的完整复杂选择器，包括后代组合器。这是否将以快速执行（因此CSS）还有待测试和确认，但一旦实施，您就可以使用它来排除某些祖先的元素。由于选择器是如何工作的，为了可靠工作，必须对元素本身而不是祖先进行否定，因此语法看起来有点不同：

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

任何熟悉jQuery的人都会很快指出，这个选择器在jQuery中起作用。这是Selector 3之间的一些差异:not()和jQuery's :not() ，Selector 4寻求纠正。

<html>元素不是<div> 。 <body>元素不是<div> 。

所以“有一个祖先不是一个”的条件对于所有的元素都是真实的。

除非你可以使用> （小孩）选择器，否则我不认为你可以做你正在做的事情 – 这没有任何意义。在第二个例子中， <article>不是div，所以匹配*:not(div) 。