如何用CSS选择除指定类及其后代以外的所有元素？

这个需求我之前也碰到过，确实有点绕，你之前用的:not(.my-class *)之所以无效，是因为它只排除了.my-class的后代元素，却没把.my-class本身排除在外，而且也没完全覆盖你要的“所有非目标元素”的范围。

给你一个可行的解决方案，用组合的:not选择器就能实现：

*:not(.my-class):not(.my-class *) {
  /* 你的全局样式 */
}

选择器拆解： #

• *：匹配页面上所有元素
• :not(.my-class)：排除带有.my-class类的元素本身
• :not(.my-class *)：排除所有属于.my-class后代的元素

把这三个部分组合起来，就精准选中了除.my-class自身及其所有后代之外的所有元素。

实际应用示例 #

假设你原来的全局样式是这样的：

/* 全局段落样式 */
p {
  margin: 1rem 0;
  color: #333;
}

/* 全局盒子模型设置 */
* {
  box-sizing: border-box;
}

现在要让这些样式不作用于.my-class及其后代，只需要把选择器修改成：

p:not(.my-class):not(.my-class *) {
  margin: 1rem 0;
  color: #333;
}

*:not(.my-class):not(.my-class *) {
  box-sizing: border-box;
}

注意事项 #

如果原来的全局样式优先级比较高（比如用到了ID选择器或者内联样式），这个组合选择器的优先级可能不够，这时候可以考虑：

• 给选择器加上父元素限定（比如body *:not(...)）来提升优先级
• 万不得已的情况下再使用!important（尽量避免，会增加样式维护难度）

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