CSS :not()伪类无父选择器时为何失效？

第一个示例中p元素变红的原因 #

:not(p)确实会选中所有不是p标签的元素，但它会匹配到<html>、<body>这类顶层元素。而color属性是会被后代元素继承的——当<body>被设置为红色后，里面的p元素会继承这个颜色，所以看起来p也变红了，并不是:not(p)直接选中了p元素。

你可以做个测试，给p元素单独设置color: initial，就能看到它不会再继承body的红色：

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

<div>Red</div>
<p>"p" now is default color!</p>

第二个示例能正常工作的原因 #

body :not(p)的选择范围是body标签下所有不是p的后代元素，它不会选中body本身。而text-decoration属性默认不会被后代继承（它的继承逻辑和color不同，只有父元素被选中且子元素无覆盖时才会表现出类似继承的效果，但这里父元素body没被选中），所以p元素不会被加上下划线，只有div这类非p元素会被选中。

关于:not()是否必须结合其他选择器 #

:not()伪类并不强制要求和其他选择器结合使用，单独用是合法的，但一定要注意继承属性带来的影响——如果选中了顶层元素，它的继承属性会影响到页面里的其他元素，就像第一个示例里的情况。

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