CSS 否定伪类 :not() 用于父/祖先元素
Posted
技术标签:
【中文标题】CSS 否定伪类 :not() 用于父/祖先元素【英文标题】：CSS negation pseudo-class :not() for parent/ancestor elements 【发布时间】：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 时一样*.
【参考方案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 当然因为它是一个根元素，在这里并不重要:)以上是关于CSS 否定伪类 :not() 用于父/祖先元素的主要内容，如果未能解决你的问题，请参考以下文章