为何某<p>元素呈现绿色？基于:not()选择器示例的技术疑问

嘿，我来帮你拆解这个问题！先把你给出的代码贴出来方便参考：

CSS 代码 #

p:not(.classy) { color: red; }
:not(p) { color: green; }

HTML 代码 #

<p>Irgendein Text.</p>
<p class="classy">Irgendein anderer Text.</p>
<span>Noch mehr Text</span>

首先明确这两个选择器的作用：

• p:not(.classy)：只选中没有.classy类的<p>元素，所以第一个<p>会被选中显示红色——这部分你已经理解了，完全没问题。
• :not(p)：选中所有不是<p>标签的元素，所以<span>会被选中显示绿色——这部分你也搞对了。

那你疑惑的“带.classy的<p>显示绿色”，按照你给出的代码其实是不符合预期的。这个元素不会被上面两个选择器中的任何一个选中，它的颜色应该是浏览器默认的文本颜色（通常是黑色）。如果它确实显示绿色，大概率是下面这些原因：

• 继承了父元素的颜色：如果这个<p>的父元素（比如<body>或外层容器）被设置了color: green;，而这个<p>本身没有被任何选择器指定颜色，就会继承父元素的绿色。
• 代码笔误：可能你实际写代码时不小心写错了选择器，比如把:not(p)写成了其他规则，或者有拼写错误。
• 存在其他CSS规则冲突：页面里可能还有你没注意到的其他CSS规则，比如有更高优先级的选择器给<p class="classy">设置了绿色（比如.classy { color: green; }，如果这条规则写在后面，会覆盖默认样式）。

如果你的目标就是让带.classy的<p>显示绿色，直接写p.classy { color: green; }就好，比用:not()绕弯子清晰多啦。

内容的提问来源于stack exchange，提问作者Kevin de Goede