父/祖先元素的 CSS 否定伪类 :not()

Question

这让我发疯：

HTML:

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

CSS：

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

这不是读作“选择所有祖先不是div 元素的h1 元素...？”因此，“你好世界！”不应该是红色的，但它仍然是。

对于上面的标记，添加子组合器是可行的：

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

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

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

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

Answer 1

这不是读作“选择所有祖先不是div 元素的h1 元素...？”

确实如此。但是在典型的 HTML 文档中，每一个h1 至少有两个不是div 元素的祖先——这些祖先不是别人，正是body 和html。

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

在 Selectors 4 和 :not() 中得到了增强，可以接受包含组合器的完整复杂选择器，包括后代组合器。这是否会在快速配置文件（以及 CSS）中实现还有待测试和确认，但一旦实现，那么你将要能够使用它来排除具有某些祖先的元素。由于选择器的工作方式，否定必须在元素本身而不是祖先上完成才能可靠地工作，因此语法看起来有点不同：

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

任何熟悉 jQuery 的人都会很快指出 this selector works in jQuery today。这是a number of disparities between Selector 3's :not() and jQuery's :not() 之一，Selectors 4 寻求纠正。

Answer 2

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

因此条件“有一个不是<div> 的祖先”对于所有元素都为真。

除非您可以使用 >（子）选择器，否则我不认为您可以做您想做的事——这真的没有意义。在您的第二个示例中，<article> 不是 div，因此它也匹配 *:not(div)。