一尘不染

parent/ancestor 元素的CSS否定伪类:not()

css

这让我发疯:

HTML:

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

CSS:

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

这不是读到“选择所有h1祖先不是div元素的元素吗?”。因此,“ Hello World!” 不应显示为红色,但仍然是。

对于上述标记,添加子组合器的工作原理是:

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

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

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

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


阅读 355

收藏
2020-05-16

共1个答案

一尘不染

这不是读到“选择所有h1祖先不是div元素的元素吗?”。

是的 但是在典型的HTML文档中, 每个 h1人至少都有两个不是div元素的祖先,而这些祖先就是bodyand html

这是尝试使用:not()以下方法过滤祖先的问题:只是无法可靠地工作,特别是当:not()不能被其他选择器(例如类型选择器或类选择器)限定时.foo:not(div)。只需将样式应用于所有h1元素并使用覆盖它们,您将拥有更加轻松的时间div h1

在选择器4中,:not()已进行增强,可以接受包含组合器(包括后代组合器)的完整复杂选择器。是否在快速配置文件中实现(从而在CSS中实现)仍待测试和确认,但是一旦实现,您_将_ 能够使用它来排除具有某些祖先的元素。由于选择器的工作方式,必须对元素本身(而不是祖先)进行取反才能可靠地工作,因此语法看起来会有些不同:

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

任何熟悉jQuery的人都会很快指出,该选择器现在可以在jQuery中使用。这是选择器3:not()与jQuery之间的众多差异之一,选择:not()器4试图纠正这一差异

2020-05-16