与 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> 都是绿色的，但我预计第一个是红色的。 Here's a JSFiddle.

有趣的是，我发现了三种不同的方法来让它工作：

1. Remove 来自 HTML 的顶级 <div>
2. Change 顶级<div> 到不同的元素（例如<section>）
3. Add 一个额外的 div 到第二个 CSS 选择器的开头 (div div:not(.exclude) p)

还有另一种奇怪的方法来打破它：

4. 使用解决方案 2 作为基础，wrap 另一个 <div> 在 <section> 周围

According to MDN:

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

这是有道理的，但我认为这里不会发生这种情况。由于<div class="exclude"> 与其直接子<p> 之间没有任何内容，因此无论嵌套在什么内部，它都应该触发该规则。我错过了什么？如果有人能帮助我理解这一点，我将不胜感激。

Answer 1

您在使用:not 时发现了一个常见的陷阱，其他答案也对此进行了描述。 CSS 中处理这个问题的经典方法，以及我们在 CSS3 之前为我们提供:not 的能力，我们这样做的方式是编写几个规则，一个处理一般情况，第二个有这个特例。在您的情况下，这看起来像：

p             { color: red;   }
div p         { color: green; }
div.exclude p { color: red;   }

Answer 2

由于<div class="exclude"> 与其直接子<p> 之间没有任何内容，因此无论嵌套在什么内部，它都应该触发该规则。我错过了什么？

<p> 是顶级<div> 和<div class="exclude"> 的后代。因此，虽然后者不匹配选择器，但前者匹配，因此您有一个匹配项。与选择器不匹配的祖先比匹配选择器的祖先更接近<p> 也没关系。

解决方案 1 和 2 通过完全消除匹配来起作用。

当 <p> 的祖先中不存在其他 <div>s 时，解决方案 3 有效，因为您将选择器限制为那些确切的条件，按照确切的顺序。这意味着如果您将类属性从内部 <div> 交换到外部，它将不再匹配选择器，反之，如果您将类 selector 从内部 div 交换到最外层，选择器与原始 HTML 结构不匹配（再次假设层次结构中不存在其他 <div>s）。

在<section> 周围包装另一个<div> 只会导致选择器再次与<div> 匹配。 <section> 被忽略，与<div class="exclude"> 的方式大致相同。

另见：

• CSS negation pseudo-class :not() for parent/ancestor elements
• Why doesn't this CSS :not() declaration filter down?
• Is the CSS :not() selector supposed to work with distant descendants?

Answer 3

你的<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>