html - CSS 否定伪类 :not() for parent/ancestor elements

Question

这让我抓狂:

HTML:

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

CSS:

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

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

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

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

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

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

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

Answer 1

Doesn't this read, "Select all h1 elements that have an ancestor that is not a div element...?"

确实如此。但是在典型的 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 试图纠正这一点。