CSS 的 :not() 仅支持单个简单选择器，无法否定层级关系；需用作用域类、all: unset、BEM 命名或 JS 判断祖先来实现精准控制。
用 :not() 无法直接否定层级关系，得换思路
CSS 没有 :not(.parent .child) 这种“否定后代”的语法——浏览器会直接报错或忽略。真正能用的只有 :not() 内部只能是单个简单选择器（比如 :not(.disabled)），不能带空格、不能嵌套、不能写复合关系。
所以想“排除某类祖先下的元素”，不能靠 :not() 硬怼，得靠更可控的匹配路径或作用域隔离。
- 常见错误现象：
div:not(.modal) p { color: red; }看似想排除模态框里的段落，实际它只检查div自身是否含.modal，完全不管里面的p是不是在.modal下 - 真正起效的是：给目标元素加明确作用域类，比如统一用
.content p，再单独重置.modal .content p - 如果项目已用 CSS-in-JS 或 Shadow DOM，优先用局部作用域（如
scoped或shadowRoot）从根源上切断继承链
用 [class] 和属性选择器避开隐式继承
当父容器通过 class 控制样式（比如 .dark-mode），子元素又没显式声明自己“不参与主题”时，颜色、字体等就会被意外继承。这时与其拼命覆盖，不如让子元素主动声明“我不要这个上下文”。
- 使用
[class*="dark"] p:not([class*="light"])不可靠——:not()仍不能带空格，且属性通配易误伤 - 更稳的做法：给需要隔离的元素加一个明确的“中立”类，如
data-isolated，然后写[data-isolated] { all: unset; }，再逐项补必要样式 -
all: unset会清掉所有继承和初始值，但要注意它也清掉了display、box-sizing等基础属性，必须手动重设
伪类 :where() 和 :is() 不解决层级否定问题
有人试过 :where(.root :not(.modal) p)，以为能绕开，其实不行。:where() 只降低选择器优先级，不改变匹配逻辑——它照样先找所有 p，再筛“不在 .modal 下的”，而 CSS 根本没有“判断祖先是否匹配”的运行时能力。
立即学习“前端免费学习笔记（深入）”；
-
:where()和:is()的参数里依然不能出现空格分隔的复杂关系（如.a .b是允许的，但:not(.a .b)在任何位置都非法） - 它们适合简化多组选择器，比如
:is(h1, h2, h3) { margin-top: 0; }，但对“排除某类祖先下的元素”无实质帮助 - 真要动态判断祖先，只能交由 JS：用
element.closest('.modal')判断，再切 class 或 style
最简落地方案：BEM 命名 + 显式重置
别指望纯 CSS 能智能识别“这个 p 是在表单里还是弹窗里”，它只会按选择器字面意思机械匹配。所以最省心的方式，是让结构和样式意图完全对齐。
- 给内容区域统一加命名空间类，如
article-content，所有样式基于它写：.article-content p - 需要例外处理的场景（如弹窗内文字），用组合类显式覆盖：
.modal .article-content p { font-size: 0.9em; } - 避免用泛型标签选择器（如
p、ul）全局设样式，尤其别设color、font-family这类高继承性属性
复杂点在于：一旦组件嵌套深、主题多、状态杂，光靠 CSS 类组合就容易漏写或冲突。这时候得靠构建时工具（比如 PostCSS 插件）自动补全作用域，或者干脆接受“部分样式必须 JS 控制”的现实。
