CSS 否定伪类 :not() 用于父/祖先元素
这让我抓狂：
HTML:
<div><h1>Hello World!</h1></div>
CSS:
*:not(div) h1 { color: #900; }
这不是读作“选择所有祖先不是 a 的 h1 元素吗？” div 元素...？”因此，“你好世界！”不应该是红色的，但它仍然是。
对于上面的标记，添加子组合器是有效的：
*:not(div) > h1 { color: #900; }
但如果它不是 div 元素的子元素，则不会影响 h1 元素。例如：
<div><article><h1>Hello World!</h1></article></div>
这就是为什么我想将 h1 元素指示为 div 元素的后代，而不是子元素。有人吗？
This is driving me nuts:
HTML:
<div><h1>Hello World!</h1></div>
CSS:
*:not(div) h1 { color: #900; }
Doesn't this read, "Select all h1 elements that have an ancestor that is not a div element...?" Thus, "Hello World!" should not be coloured red, yet it still is.
For the above markup, adding the child combinator works:
*:not(div) > h1 { color: #900; }
But doesn't affect the h1 element if it is not a child of a div element. For example:
<div><article><h1>Hello World!</h1></article></div>
Which is why I'd like to indicate the h1 element as a descendant, not a child, of the div element. Anyone?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
确实如此。但在典型的 HTML 文档中，每个
h1至少有两个不是div元素的祖先 - 而这些祖先正是>body和html。这是尝试使用
:not()过滤祖先的问题：它无法可靠地工作，特别是当:not()未被某些人限定时其他选择器，例如类型选择器或类选择器，例如.foo:not(div)。只需将样式应用于所有h1元素并使用div h1覆盖它们，您就会变得更加轻松。在 选择器 4 中，
:not()有已得到增强，可以接受包含组合器的完整复杂选择器，包括后代组合器。这是否会在快速配置文件（以及 CSS）中实现仍有待测试和确认，但一旦实现，您将能够使用它来排除具有某些祖先的元素。由于选择器的工作方式，必须对元素本身而不是祖先进行求反才能可靠地工作，因此语法看起来会有点不同：任何熟悉 jQuery 的人都会很快指出 此选择器现在可以在 jQuery 中使用。这是 Selector 3 之间的许多差异之一 < code>:not() 和 jQuery 的
:not()，Selectors 4 试图纠正它们。It does. But in a typical HTML document, every
h1has at least two ancestors that are notdivelements — and those ancestors are none other thanbodyandhtml.This is the problem with trying to filter ancestors using
:not(): it just doesn't work reliably, especially when the:not()is not being qualified by some other selector such as a type selector or a class selector, e.g..foo:not(div). You'll have a much easier time simply applying styles to allh1elements and overriding them withdiv h1.In Selectors 4,
:not()has been enhanced to accept full complex selectors containing combinators, including the descendant combinator. Whether this will be implemented in the fast profile (and thus CSS) remains to be tested and confirmed, but once it is implemented, then you will be able to use it to exclude elements with certain ancestors. Due to how selectors work, the negation has to be done on the element itself and not the ancestor in order to work reliably, and therefore the syntax will look a little different:Anyone who's familiar with jQuery will quickly point out that this selector works in jQuery today. This is one of a number of disparities between Selector 3's
:not()and jQuery's:not(), which Selectors 4 seeks to rectify.元素不是。元素不是。因此，条件“具有不是
的祖先”对于所有元素都成立。除非您可以使用
>（子）选择器，否则我认为您无法执行您想要执行的操作 - 这实际上没有意义。在第二个示例中，不是 div，因此它也匹配*:not(div)。The
<html>element is not a<div>. The<body>element is not a<div>.So the condition "has an ancestor that is not a
<div>" will be true for all elements.Unless you can use the
>(child) selector, I don't think you can do what you're trying to do - it doesn't really make sense. In your second example,<article>is not a div, so that matches*:not(div)too.