本文介绍一种更优雅、单规则、无覆盖的 CSS 方式：利用 h1:not(header h1) 选择器，仅对非 后代的 元素统一设色，避免冗余声明与 revert 的兼容性风险。

本文介绍一种更优雅、单规则、无覆盖的 css 方式：利用 `h1:not(header h1)` 选择器，仅对非 `

` 后代的 `

` 元素统一设色，避免冗余声明与 `revert` 的兼容性风险。

在 CSS 开发中，我们常需实现“默认样式 + 例外排除”的需求，例如：将所有 <h1></h1> 设为红色，但 <header></header> 内的 <h1></h1> 保持默认（或继承）颜色。传统方案如：

h1 { color: red; }
header h1 { color: revert; }

虽可行，但存在两个明显缺陷：一是需两条规则、两次渲染计算；二是 revert 在部分旧版浏览器（如 Safari unset 或失效，导致样式失控。

更优解是使用 否定伪类 :not() 配合复合选择器：

h1:not(header h1) {
  color: red;
}

⚠️ 注意：h1:not(header h1) 的语义是 “匹配所有不是 header h1 这一匹配结果的 <h1></h1> 元素” —— 即：只要该 <h1></h1> 不处于 <header></header> 的后代路径中，就命中。这正符合“除 <header></header> 内外，其余 <h1></h1> 均染红”的业务逻辑。

✅ 正确性验证（基于标准 DOM）：

• <header><h1>Title</h1></header> → 属于 header h1 → 被 :not() 排除 → 不应用红色；
• <h1>Level-1 heading</h1>（位于 直接子级）→ 不匹配 header h1 → 应用红色；
• 同理，后续所有独立 <h1></h1> 均被匹配。

❌ 常见误区澄清：

• :not(header) h1 ❌ 错误：它表示“<h1></h1> 的父元素不是 <header></header>”，但实际选择的是 <h1></h1> 元素本身，而 :not() 只能作用于当前选择器的主元素（此处是 h1），不能限制其祖先——因此该写法语法合法但逻辑无效（等价于 h1，因 h1 永远不会是 header 元素）。
• body > h1 ❌ 脆弱：仅匹配 的直接子级 <h1></h1>，若结构变为 <main><h1>...</h1></main> 则失效，缺乏语义健壮性。

? 进阶提示：该模式可扩展至其他场景，例如：

/* 所有 .btn 除 .modal 内的之外 */
.btn:not(.modal .btn) { background: blue; }

/* 所有段落，除 article aside 内的之外 */
p:not(article aside p) { font-size: 1rem; }

总结：h1:not(header h1) 是语义清晰、单规则、跨浏览器兼容（Chrome 4+, Firefox 4+, Safari 9+，Edge 13+）且无需覆盖的现代解决方案。它将“排除逻辑”内聚于一个选择器中，提升可维护性与可读性，是 CSS 选择器组合能力的典型实践。