CSS 中 :not() 无法选中“不在 .modal 内”的元素，因其不支持祖先关系检测；正确做法是用根类限定作用域（如 .page-content p）或显式重置（.modal p { line-height: 1.3; }）。
直接用 :not() 无法选中“不在某容器内”的元素
因为 :not() 只能作用于当前元素自身状态（比如类名、属性、伪类），不能检测祖先关系。你想表达的“不在 .modal 里”本质是“没有 .modal 祖先”，而 CSS 原生不支持“向上匹配祖先”的选择器。
常见错误写法：:not(.modal) p —— 这其实选的是“不是 .modal 类的元素下的 p”，和嵌套层级完全无关；更危险的是 *:not(.modal) p，看似想排除，实际会因选择器权重和匹配逻辑失效，甚至误中。
- 浏览器根本不支持类似
:not(ancestor(.modal))的语法 -
:not()里只允许简单选择器（如.cls、[attr]、:hover），不能写复合选择器或关系符 - 试图用
body > *:not(.modal) p之类“绕开”也无效——它只排除直接子元素带.modal类的情况，对深层嵌套毫无约束力
真正可行的方案：靠父容器加隔离类（推荐）
与其在 CSS 里“排除”，不如在 HTML 结构上“明确划定作用域”。给需要特殊样式的区域统一加一个根类（比如 .page-content），然后所有样式都基于它写：
.page-content p {
line-height: 1.6;
}
.page-content a {
color: #007bff;
}
这样，.modal p、.tooltip p 等自然不受影响——没加 .page-content 就不命中。这是最稳定、可维护性最强的做法。
立即学习“前端免费学习笔记（深入）”；
- 避免样式泄漏：模态框、弹层、侧边栏等独立 UI 区块，各自用专属根类包裹
- 配合 BEM 或 CSS-in-JS 更清晰，例如
.article__content p和.modal__body p完全解耦 - 比 JS 动态加 class 或 inline style 更轻量，也不依赖运行时
如果必须用纯 CSS “模拟排除”，只能靠显式重置
当无法改 HTML 结构（比如第三方组件库嵌入），且确实要让某类元素在特定区域“不生效”，唯一可靠方式是：先全局设样式，再为容器内元素**显式覆盖重置**。
例如，想让所有 p 有默认行高，但 .modal 里的 p 用紧凑行高：
p {
line-height: 1.6;
}
.modal p {
line-height: 1.3;
}
这不是“排除”，而是“覆盖”。它有效，是因为 CSS 层叠规则天然支持这种优先级控制。
- 不要幻想用
:not(.modal) p实现同样效果——它会漏掉<div class="wrapper"><p>...</p></div>这种中间层 - 重置规则要足够具体，避免被其他样式意外覆盖（比如用
.modal p而非仅p） - 注意性能：大量重置规则本身不会卡顿，但会让开发者难以追踪最终生效样式
为什么 JavaScript 方案通常不值得推荐
有人想到用 JS 遍历 p，检查 closest('.modal')，再加 class 排除。这理论上可行，但问题明显：
- 首次渲染后才执行，存在 FOUC（闪动）风险
- 动态插入的
p（如 AJAX 加载内容）需额外监听或重跑逻辑 - 增加 bundle 体积，且和纯 CSS 方案相比毫无必要优势
-
document.querySelectorAll('p').forEach(p => !p.closest('.modal') && p.classList.add('outside-modal'))这类代码，维护成本远高于 HTML 加根类
真正难处理的，从来不是“怎么选中”，而是“要不要让这个样式跨上下文生效”。一旦意识到这点，问题就从 CSS 技巧转向结构设计了。
