否定伪类选择器 [:not()] 未按预期工作 [重复]

Question

在以下示例中，我希望 all p 元素以 green 背景呈现，因为 red 背景应该仅当 .red 类 不是 .green 类的后代时才适用。然而，事实并非如此。

.green p {
  background: green;
}

:not(.green) .red > p {
  background: red;
}

<section class="green">
  <p>Neutrum vero, inquit ille. Et nemo nimium beatus est; Age, inquies, ista parva sunt. Haec para/doca illi..
    <p/>
    <div class="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc enim constituto in philosophia constituta sunt omnia. Num quid tale Democritus..</p>
      <p>Zenonis est, inquam, hoc Stoici. Certe, nisi voluptatem tanti aestimaretis. Erat enim Polemonis. Tanta vis admonitionis inest in locis.</p>
      <p>Age sane, inquam. Omnis enim est natura diligens sui. Duo Reges: constructio interrete. Quid ergo attinet gloriose loqui.</p>
    </div>
    <p>Pro consul accusata id, errem nonumy assentior qui et. Quem albucius omittantur id sea, duo cu posse insolens.
      <p/>
</section>

为什么在本例中否定选择器没有按预期工作？

Answer 1

你需要用not添加根选择器。

.green p {
  background: green;
}

root:not(.green) .red > p {
  background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <section class="green">
  <p>Neutrum vero, inquit ille. Et nemo nimium beatus est; Age, inquies, ista parva sunt. Haec para/doca illi..
    <p/>
    <div class="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc enim constituto in philosophia constituta sunt omnia. Num quid tale Democritus..</p>
      <p>Zenonis est, inquam, hoc Stoici. Certe, nisi voluptatem tanti aestimaretis. Erat enim Polemonis. Tanta vis admonitionis inest in locis.</p>
      <p>Age sane, inquam. Omnis enim est natura diligens sui. Duo Reges: constructio interrete. Quid ergo attinet gloriose loqui.</p>
    </div>
    <p>Pro consul accusata id, errem nonumy assentior qui et. Quem albucius omittantur id sea, duo cu posse insolens.
      <p/>
</section>
</body>
</html>

Answer 2

您需要在伪类前面放置一个选择器，例如在您想要section:not(.green) .red > p 的情况下，伪类是添加到选择器的关键字。