Question

这让我疯狂：

HTML：

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

CSS：

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

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

对于上述标记，添加子组合器有效：

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

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

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

这就是为什么我要将h1元素指定为div元素的后代而不是子元素。任何人吗？

Answer 1

请勿阅读“选择所有h1元素，其祖先不是div元素......？”

确实如此。但在典型的HTML文档中，每个 h1至少有两个不是div元素的祖先 - 而这些祖先只有body和{{ 1}}。

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

在Selectors 4中，div h1已被增强，可接受包含组合子的完整复杂选择器，包括后代组合子。这是否将在快速配置文件（以及CSS）中实现仍有待测试和确认，但一旦实现，您将能够使用它来排除具有某些祖先的元素。由于选择器如何工作，必须在元素本身而不是祖先上进行否定才能可靠地工作，因此语法看起来会有所不同：

:not()

任何熟悉jQuery的人都会很快指出this selector works in jQuery today。这是a number of disparities between Selector 3's :not() and jQuery's :not()中的一个，其中选择者4试图纠正。

Answer 2

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

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

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

CSS否定伪类：父（祖先）元素的not（）

2 个答案: