CSS如何为除嵌套元素外的内容应用样式？

你写的CSS选择器.red :not(.notred)只匹配.red元素下的子元素，但Text1是.red容器里的直接文本内容，不属于任何子元素，所以这个选择器根本选不到它。而Text2所在的<p>带.notred类，也被排除了，结果就是俩文本都没变红。

推荐用下面两种简单方式实现需求：

方式一：先统一设置，再覆盖 #

这是最稳妥且兼容性最好的写法：

/* 先让.red容器内所有文本默认变红 */
.red {
  color: #ff0000;
}
/* 再把.notred元素的颜色改回默认 */
.red .notred {
  color: initial; /* 也可以直接写你需要的颜色，比如#000 */
}

方式二：用:has伪类（可选） #

如果你想精准选中容器内的文本和非.notred子元素，可以用:has，但注意旧浏览器不支持：

.red:not(:has(.notred)),
.red :not(.notred) {
  color: #ff0000;
}

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