这让我发疯:
HTML:
<div><h1>Hello World!</h1></div>
CSS:
*:not(div) h1 { color: #900; }
这不是读到“选择所有h1祖先不是div元素的元素吗?”。因此,“ Hello World!” 不应显示为红色,但仍然是。
h1
div
对于上述标记,添加子组合器的工作原理是:
*:not(div) > h1 { color: #900; }
但是,h1如果它不是div元素的子元素,则不会影响元素。例如:
<div><article><h1>Hello World!</h1></article></div>
这就是为什么我想将h1元素表示为元素的后代而不是子div元素。任何人?
这不是读到“选择所有h1祖先不是div元素的元素吗?”。
是的 但是在一个典型的HTML文档中, 每个 h1人至少都有两个不是div元素的祖先,而这些祖先就是bodyand html。
body
html
这是尝试使用:not()以下方法过滤祖先的问题:只是无法可靠地工作,尤其是当:not()不能被其他选择器(例如类型选择器或类选择器)限定时.foo:not(div)。只需将样式应用于所有h1元素并用覆盖它们,您将拥有更加轻松的时间div h1。
:not()
.foo:not(div)
div h1
在选择器4中,:not()已进行增强,可以接受包含组合器(包括后代组合器)的完整复杂选择器。这是否会在快速配置文件来实现的(因而CSS)仍有待检验和证实,但一旦得以实施,那么你_将_可以使用它来排除某些祖先元素。由于选择器的工作方式,必须对元素本身(而不是祖先)进行取反才能可靠地工作,因此语法看起来会有些不同:
h1:not(div h1) { color: #900; }
任何熟悉jQuery的人都会很快指出,该选择器现在可以在jQuery中使用。这是选择器3:not()与jQuery之间的众多差异之一,选择:not()器4试图纠正这一差异。