CSS如何用:not或其他方案选中div内排除指定类及子元素的节点

你写的.container *:not(.wrapper_1)选择器只能排除*自身class为wrapper_1*的元素，无法排除wrapper_1内部的嵌套子元素——因为这些子元素自身class并不带wrapper_1，依然会匹配这个选择器规则，所以样式会被错误应用。

方案1：通用覆盖写法（全浏览器兼容，推荐优先使用） #

这个方案没有任何兼容性问题，逻辑分两步：

1. 先给.container下的所有后代元素设置你需要的目标样式
2. 再单独给.wrapper_1本身、以及.wrapper_1内部的所有后代元素设置对应样式，覆盖前面的通用规则

对应你给出的代码，修改后的CSS如下：

/* 先给.container所有后代设置目标蓝色样式 */
.container * {
  color: blue;
}

/* 覆盖wrapper_1本身和它所有内部元素的样式 */
.container .wrapper_1,
.container .wrapper_1 * {
  color: red;
}

.wrapper_2 {
  color: green;
}

应用后对你的示例HTML来说，渲染效果完全符合预期：

• 三层嵌套div里的This is the test content 1 .显示蓝色
• wrapper_1本身的This is the test content 2、内部span的This is the test content 3都显示红色，不受蓝色规则影响
• wrapper_2的This is the test content 4.显示绿色，自身样式正常生效

方案2：CSS4 选择器直写（仅兼容现代浏览器） #

如果你的项目不需要兼容IE、以及2021年之前发布的浏览器版本，可以直接用支持选择器列表参数的新版:not()语法，一步写出排除规则，不需要额外写覆盖代码：

.wrapper_1 {
  color: red;
}

/* 直接排除wrapper_1本身，以及wrapper_1的所有后代元素 */
.container *:not(.wrapper_1, .wrapper_1 *) {
  color: blue;
}

.wrapper_2 {
  color: green;
}

这个写法逻辑最直观，但是兼容性稍差：Chrome 88+、Firefox 84+、Safari 14.1+才支持，生产环境如果需要兼容老旧设备不推荐使用。

如果用方案1的覆盖写法，注意wrapper_1相关的选择器优先级不要低于前面的通用后代选择器，只要按照示例里的写法保持选择器权重一致、把覆盖规则写在通用规则后面，就不会出现优先级冲突问题。

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