这让我抓狂:
HTML:
<div><h1>Hello World!</h1></div>
CSS:
*:not(div) h1 { color: #900; }
这不是读作“选择所有祖先不是 div
元素的 h1
元素...?”因此,“ Hello World !”不应该是红色的,但它仍然是。
对于上面的标记,添加子组合器是可行的:
*:not(div) > h1 { color: #900; }
但如果 h1
元素不是 div
元素的子元素,则不会影响它。例如:
<div><article><h1>Hello World!</h1></article></div>
这就是为什么我想将 h1
元素表示为 div
元素的后代,而不是子元素。有人吗?
最佳答案
Doesn't this read, "Select all
h1
elements that have an ancestor that is not adiv
element...?"
确实如此。但是在典型的 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 试图纠正这一点。
关于html - CSS 否定伪类 :not() for parent/ancestor elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7084112/