如何利用CSS Level 4 :not()排除指定类及其子元素受全局样式影响？

首先明确核心问题：CSS的:not()选择器只能排除单个元素，无法直接排除整个子树——因为全局样式如果是针对特定标签（比如p、button）设置的，即使父元素被:not()排除，子元素本身还是会被全局样式的选择器命中。比如你写p:not(.exclude)，只会排除class为.exclude的p标签，但.exclude容器里的p标签依然会被全局的p样式选中。

下面给你两种可行的解决方案：

1. 给排除区域加类，重置内部样式 #

给需要排除全局样式的根元素加一个专属类（比如.no-global），然后针对这个类下的所有元素重置全局样式。

示例代码：

/* 原全局样式 */
p { color: #f00; line-height: 1.5; }
button { padding: 8px 16px; border: none; background: #007bff; }

/* 排除区域的样式重置 */
.no-global * {
  /* 逐个重置全局样式属性 */
  color: initial;
  line-height: normal;
  padding: initial;
  border: initial;
  background: initial;
  /* 或者用all: unset快速重置所有样式，但要注意副作用 */
  /* all: unset; */
}

• 优点：兼容性好，所有浏览器都支持；
• 缺点：需要明确知道全局样式的所有属性，逐个重置；如果用all: unset，会清除元素的默认样式（比如输入框的边框、按钮的默认样式），需要额外恢复必要的默认样式。

2. 使用CSS @scope规则（推荐，现代浏览器） #

CSS的@scope是专门用来限定样式作用域的新特性，可以直接让全局样式只作用在排除区域之外的元素。

示例代码：

@scope (:not(.no-global)) {
  /* 把原来的全局样式全部放在这个作用域内 */
  p { color: #f00; line-height: 1.5; }
  button { padding: 8px 16px; border: none; background: #007bff; }
}

这样所有样式只会作用在不是.no-global的元素及其子元素，.no-global内部的所有元素都不会受到这些样式影响。

• 优点：无需重置样式，代码更简洁优雅；
• 兼容性：目前Chrome、Firefox、Edge等现代浏览器已支持，旧版浏览器（比如IE）不支持。

为什么之前的:not()组合无效？ #

举个例子，如果你尝试写:not(.exclude) *，这个选择器的逻辑是“选中所有本身不是.exclude的元素”——但.exclude内部的子元素本身就不是.exclude，所以依然会被选中，自然无法排除整个子树。CSS选择器无法通过:not()直接匹配“不是某个元素后代”的节点，这也是为什么需要用上面两种方案来绕开这个限制。

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