在以下示例中，我希望所有p元素都使用绿色背景进行渲染，因为只有当.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>为什么否定选择器在本例中没有按预期工作？
您需要在伪类前面放一个选择器，例如，在您想要section:not(.green) .red > p的情况下，伪类是添加到选择器中的关键字。
您需要使用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>