Html CSS否定伪类：不（）用于父/祖先元素

这让我发疯：

HTML:

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

这不是说，“选择所有的

h1

元素，它们的祖先不是

div

元素…”因此，“Hello World！”不应该是红色的，但它仍然是红色的

对于上述标记，添加子combinator有效：

*：not（div）>h1{color:#900；}

但如果

h1

元素不是

div

元素的子元素，则不会影响该元素。例如：

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

你好，世界！

这就是为什么我要将

h1

元素表示为

div

元素的后代，而不是子元素。有人吗

这不是说，“选择所有具有非

div

元素的祖先的

h1

元素…”

是的。但是在一个典型的HTML文档中，每个

h1

至少有两个不是

div

元素的祖先，而这些祖先正是

body

和

HTML

这就是尝试使用

：not（）

：筛选祖先的问题：它无法可靠地工作，尤其是当

：not（）

未被其他选择器（例如

）或类选择器限定时。foo:not（div）

。您只需将样式应用于所有

h1

元素并用

divh1

覆盖它们，就可以轻松得多

在中，

：not（）

已得到增强，可以接受包含组合子的完整复杂选择器，包括子代组合子。这是否将在fast概要文件（以及CSS）中实现还有待测试和确认，但一旦实现，您将能够使用它排除具有特定祖先的元素。由于选择器的工作方式，为了可靠地工作，必须对元素本身而不是祖先进行否定，因此语法看起来会有些不同：

h1:not（divh1）{color:#900；}

任何熟悉jQuery的人都会很快指出这一点。这是选择器4试图纠正的问题之一。

元素不是

。

元素不是

因此，条件“有一个不是

的祖先”对于所有元素都是真的

---

除非你能使用

>

（子）选择器，否则我认为你不能做你想做的事情——这真的没有意义。在您的第二个示例中，

不是div，因此与

*：not（div）

也匹配。

在旁注中，当您使用任何其他类型的选择器时，您可以立即删除

*

，即

：not（div）

，就像您在不使用

*

所有元素的情况下指定

.class

或

\id

当然除了

html

，因为它是一个根元素，在这里它并不重要：）有没有任何解决方案可以用3级选择器做类似的事情？@Alexandre D:如果有，我会提到它。正如我所说，您所能做的最好的事情就是“将样式应用于所有h1元素并用div h1覆盖它们。”