CSS：not()选择器应该与远程后代一起使用吗？

这是 CSS3的官方文档：not()伪类：
http://www.w3.org/TR/css3-selectors/#negation
和建议的CSS Selectors Level 4增强功能：
http://dev.w3.org/csswg/selectors4/#negation

我一直在搜索实现和浏览器支持：not(),但我发现的唯一例子是单个元素或元素的直接子元素,例如：

div *:not(p) { color: red; }

< p>时,上述示例有效.是< div>的直接子项,但是当< p>时它不起作用是< div>的更远的后代.

div :not(p) {
    color: red;
}

<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

如果答案在上面的官方文档中,那么我没有找到/理解它.正如我所说的,我搜索了这个网站和网站,但找不到任何关于支持或缺乏的讨论：not()作为另一个元素的孙子.

这应该像我认为的那样工作吗？

解决方法

Is this supposed to work like I think it should?

不,你看到的行为是正确的.

在您的上一个示例中,尽管< blockquote>包含< p&gt ;,它是< blockquote>本身匹配*：not(p),以及它必须是< div>的后代的条件,它是.该样式仅应用于< blockquote>,然后由< p>继承.在里面.

< p>元素本身仍然反对否定,因此< p>本身仍然被排除在你的选择器之外.它只是从其父级继承文本颜色,< blockquote>元件.

即使它的相对接近的祖先没有与选择器相匹配,你也可以担心像html和body这样的元素 – 虽然你可能只是在开始时使用一个身体选择器：

body div...

这就是为什么我经常强烈建议不要使用：not()选择器来过滤后代,特别是当没有使用类型选择器限定时(比如示例中的div).它不像大多数人所期望的那样工作,并且使用像颜色这样的继承属性只会使问题更加复杂,而且会使作者更加困惑.有关更多示例,请参阅我对这些其他问题的回答：

> Why doesn’t this CSS :not() declaration filter down?
> CSS negation pseudo-class :not() for parent/ancestor elements

所描述的问题的解决方案是简单地将不同的颜色应用于< p>.元素.由于继承,您将无法使用选择器简单地排除它们：

/* Apply to div and let all its descendants inherit */
div {
  color: red;
}

/* Remove it from div p */
div p {
  color: black;
}

选择器级别4：是,：not()确实已被增强,以接受包含组合器的完整复杂选择器.从本质上讲,这意味着(一旦浏览器开始实现它),您将能够编写以下选择器并使其完全符合您的要求：

p:not(div p) {
  color: red;
}

如果有人有兴趣,这今天在jQuery中工作.

CSS：not()选择器应该与远程后代一起使用吗？

解决方法

相关文章