:not()伪选择器使用异常：p元素意外被应用样式的问题咨询

这是个很容易踩中的CSS继承陷阱！我来给你理清楚背后的原因：

问题根源：继承 + 全局匹配 #

你的CSS规则:not(p) { color: red; }确实会选中所有不是<p>的元素，但这里面包含了<html>、<body>这些包裹着所有页面内容的父容器。当这些父容器被设置了color: red之后，你的<p>元素会继承父元素的文本颜色——虽然<p>本身并没有被:not(p)规则选中，但它会“继承”来自上层元素的样式，所以看起来也变成红色了。

验证这个逻辑的方法 #

你可以给<p>添加一个明确的颜色声明，比如：

:not(p) { color: red; }
p { color: black; }

这时候<p>会变回黑色，因为直接作用于元素的样式优先级远高于继承来的样式，这也能证明<p>本身并没有被:not(p)选中。

解决方法：限定匹配范围 #

如果你的目标是让直接的非<p>子元素变红，而不是影响整个页面的继承链，可以把:not()的匹配范围限定到具体容器的子元素，比如：

body > :not(p) { color: red; }

这样只会选中<body>的直接子元素里的非<p>元素（也就是你的<a>和<h2>），不会修改<body>本身的颜色，<p>自然就不会继承红色了。

关键知识点回顾 #

• :not()伪类的匹配范围是全局的，默认会包括所有层级的元素，包括根元素和父容器
• color是可继承的CSS属性，父元素的样式会传递给子元素
• 要避免这类问题，要么给需要保留默认样式的元素设置明确的样式，要么通过选择器限定:not()的作用范围

内容的提问来源于stack exchange，提问作者Notorious Zet