Html CSS 否定伪类 :not() 用于父/祖先元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7084112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS negation pseudo-class :not() for parent/ancestor elements
提问by charles
This is driving me nuts:
这让我发疯：
HTML:
HTML：
<div><h1>Hello World!</h1></div>
CSS:
CSS：
*:not(div) h1 { color: #900; }
Doesn't this read, "Select all h1elements that have an ancestor that is not a divelement...?" Thus, "Hello World!" should not be coloured red, yet it still is.
这不是说，“选择所有h1具有不是div元素的祖先的元素......？” 因此，“你好世界！” 不应该是红色的，但它仍然是。
For the above markup, adding the child combinator works:
对于上述标记，添加子组合器有效：
*:not(div) > h1 { color: #900; }
But doesn't affect the h1element if it is not a child of a divelement. For example:
但h1如果它不是div元素的子元素，则不会影响该元素。例如：
<div><article><h1>Hello World!</h1></article></div>
Which is why I'd like to indicate the h1element as a descendant, not a child, of the divelement. Anyone?
这就是为什么我想将h1元素表示为元素的后代，而不是子div元素。任何人？
回答by BoltClock
Doesn't this read, "Select all
h1elements that have an ancestor that is not adivelement...?"
这不是说，“选择所有
h1具有不是div元素的祖先的元素......？”
It does. But in a typical HTML document, everyh1has at least two ancestors that are not divelements — and those ancestors are none other than bodyand html.
确实如此。但是在一个典型的 HTML 文档中，每个元素h1至少有两个不是div元素的祖先——而这些祖先就是body和html。
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 all h1elements and overriding them with div h1.
这是尝试使用 过滤祖先的问题:not()：它不能可靠地工作，尤其是当:not()未被其他选择器（例如类型选择器或类选择器，例如.foo:not(div). 您只需将样式应用于所有h1元素并使用div 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 willbe 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:
在Selectors 4 中，:not()已得到增强以接受包含组合器的完整复杂选择器，包括后代组合器。这是否会在快速配置文件（以及 CSS）中实现还有待测试和确认，但是一旦实现，您就可以使用它来排除具有某些祖先的元素。由于选择器的工作方式，为了可靠地工作，必须对元素本身而不是祖先进行否定，因此语法看起来有点不同：
h1:not(div h1) { color: #900; }
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.
任何熟悉 jQuery 的人都会很快指出，这个选择器今天在 jQuery 中有效。这是Selector 3:not()和 jQuery之间的众多差异:not()之一，Selectors 4 试图纠正这些差异。
回答by RichieHindle
The <html>element is not a <div>. The <body>element is not a <div>.
该<html>元素不是<div>. 该<body>元素不是<div>.
So the condition "has an ancestor that is not a <div>" will be true for all elements.
因此，条件“有一个不是 a 的祖先<div>”对所有元素都成立。
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.
除非您可以使用>（子）选择器，否则我认为您无法做您想做的事情 - 这真的没有意义。在您的第二个示例中，<article>不是 div，因此也匹配*:not(div)。
