CSS 否定伪类 :not() 用于父/祖先元素答案

【问题标题】：CSS negation pseudo-class :not() for parent/ancestor elementsCSS 否定伪类 :not() 用于父/祖先元素
【发布时间】：2011-10-28 09:16:19
【问题描述】：

这让我发疯了：

HTML：

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

CSS：

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

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

对于上述标记，添加子组合器可以：

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

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

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

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

【问题讨论】：

附带说明，当您使用任何其他类型的选择器时，您可以立即删除*，即:not(div)，就像您指定.class 或#id 时一样*.

标签： html css css-selectors

【解决方案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 试图纠正它。

【讨论】：

有什么解决方案可以用 Selectors Level 3 做类似的事情吗？
@Alexandre D.：如果有的话，我会提到的。正如我所说，你能做的最好的事情就是“将样式应用于所有 h1 元素并用 div h1 覆盖它们。”

【解决方案2】：

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

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

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

【讨论】：

"所有元素" 除了html 当然因为它是一个根元素，在这里并不重要:)