本文介绍如何使用 CSS 的 :not() 伪类与子选择器组合，为指定容器内所有 标题统一设置样式，同时自动排除所有嵌套在 标签内部的标题，无需修改 HTML 结构。
本文介绍如何使用 css 的 :not() 伪类与子选择器组合，为指定容器内所有 <h2></h2> 标题统一设置样式，同时自动排除所有嵌套在 <a></a> 标签内部的标题，无需修改 html 结构。
在实际项目中，我们常需对某容器（如 #page-container）下的所有 <h2></h2> 元素进行统一视觉控制，但语义上——链接（<a></a>）内不应包含块级标题，若 HTML 已固化无法调整，则必须通过 CSS 精准“绕过”这类非法嵌套结构。
直接使用 #page-container h2 会匹配所有后代 <h2></h2>，包括 <a><h2>...</h2></a> 中的元素，导致样式污染。理想方案是：仅匹配那些父级不是 <a></a> 的 <h2></h2>。CSS 提供了简洁可靠的解法：
#page-container > h2,
#page-container :not(a) > h2 {
font-size: 20px;
color: #0F1111;
font-family: Arial, sans-serif;
}
✅ 原理说明：
-
#page-container > h2：匹配#page-container的直接子级<h2></h2>； -
#page-container :not(a) > h2：匹配#page-container内任意非<a></a>元素的直接子级<h2></h2>（即只要<h2></h2>的父元素不是<a></a>，就生效）。
二者并集覆盖了所有“父元素 ≠<a></a>”的<h2></h2>，天然跳过<a><h2></h2></a>这一非法嵌套路径。
⚠️ 重要注意事项：
-
:not(a) > h2不等价于:not(a > h2)—— 后者语法无效（:not()只接受单个简单选择器），切勿混淆； - 此方案依赖 DOM 层级关系，对
<a><div><h2>...</h2></div></a>同样有效（因<h2></h2>父级是<div>，非 <code><a></a>）； - 避免滥用
!important：示例中原始代码含多个!important，实际应优先通过选择器特异性（specificity）控制优先级，提升可维护性； - 若需支持
<h1></h1>–<h6></h6>全系列标题，可扩展为#page-container > :is(h1,h2,h3,h4,h5,h6), #page-container :not(a) > :is(h1,h2,h3,h4,h5,h6)（现代浏览器支持）。
该方法兼顾兼容性（IE9+）与语义健壮性，是处理“受限 HTML 下样式隔离”的典型 CSS 实践。
