与CSS级联:不是伪类

Question

我很困惑为什么这个例子不起作用:

CSS:

p {
  color: red;
}

div:not(.exclude) p {
  color: green;
}

HTML:

<div>
  <div class="exclude">
    <p>I should be red</p>
  </div>
  <div>
    <p>I should be green</p>
  </div>
</div>

最终的结果是两者<p>都是绿色的,但我预计第一个是红色的.这是一个JSFiddle.

有趣的是,我找到了三种不同的方法来使它工作:

1. <div>从HTML中删除顶级
2. 将顶级更改<div>为其他元素(例如<section>)
3. div在第二个CSS选择器的开头添加一个额外的(div div:not(.exclude) p)

另一个奇怪的方法来打破它:

4. 使用溶液2为基础,包裹另一个<div>围绕<section>

据MDN称:

此选择器仅适用于一个元素; 你不能用它来排除所有的祖先.例如,body :not(table) a仍将应用于表内的链接,因为<tr>它将与:not()选择器的部分匹配.

这是有道理的,但我认为这不会发生在这里.由于它<div class="exclude">和它的直接子之间没有任何东西<p>,它应该触发规则而不管它嵌套在里面.我错过了什么？如果有人能帮助我理解这一点,我真的很感激.

Answer 1

由于它<div class="exclude">和它的直接子之间没有任何东西<p>,它应该触发规则而不管它嵌套在里面.我错过了什么？

它<p>是顶级<div>和<div class="exclude">.的后代.因此,虽然后者与选择器不匹配,但前者确实如此,因此您有匹配.无法匹配选择器的祖先比那个选择器更接近的祖先<p>并不重要.

解决方案1和2通过完全消除匹配来工作.

解决方案3 <div>在其<p>祖先中不存在其他任何东西时起作用,因为这样您就可以按照确切的顺序将选择器限制为那些精确的标准.这意味着如果您将class属性从内部交换<div>到外部属性,它将不再与选择器匹配,相反,如果您将类选择器从内部交换div为外部,则选择器将与原始HTML结构不匹配(再假设,假设<div>层次结构中不存在其他内容).

<div>围绕<section>正义包装另一个导致选择器再次与之匹配<div>.该<section>被忽略,在大致相同的方式<div class="exclude">.

也可以看看:

• CSS否定伪类:父(祖先)元素的not()
• 为什么这个CSS:not()声明没有过滤掉？
• CSS:not()选择器是否应该与远程后代一起使用？

Answer 2

你有一个<div>比<div class="exclude">.

在您的样式中，您已经表明 - 就:not伪类而言 - 任何祖先<div>都可以。（即祖父母<div>和父母一样好<div>。）

要专注于直接父级，您的 CSS 需要使用直接子级选择器 ( >)：

p {
color: red;
}
    
div:not(.exclude) > p {
color: green;
}

<div>
  <div class="exclude">
    <p>I should be red</p>
  </div>
  <div>
    <p>I should be green</p>
  </div>
</div>