）的精准应用：只匹配特定层级的子元素
" />
本文详解如何使用 css 直接子选择器 `>` 构建多级嵌套选择器，精准定位 `.cms-page-view .column` 下**紧邻的 `div` 元素中的直接 `h2` 子元素**，避免影响深层嵌套（如 `section > div > h2`）的同名标签。
在前端开发中，常需对某类结构中的“特定层级”的元素施加样式，而排除更深层或同级其他位置的同类标签。此时，仅靠类名或后代选择器（空格）极易造成样式污染；而 :first-child 或 :nth-child() 等伪类又依赖 DOM 顺序，缺乏结构鲁棒性。直接子选择器 > 是解决该问题的核心工具——它强制要求目标元素必须是前一选择器所匹配元素的直接子节点，不跨层、不跳级。
以实际需求为例：需将 .cms-page-view .column 内其直接子 div 中的 h2 设为蓝色背景，但忽略 <section><div><h2> 这类嵌套三层及以上的 h2。关键在于明确层级路径：
- ✅ 匹配路径：.cms-page-view → .column（后代）→ > div（直接子）→ > h2（该 div 的直接子）
- ❌ 不匹配路径：.cms-page-view .column div section div h2（中间含 section 和额外 div，h2 并非最内层 div 的直接子）
对应 CSS 写法如下（支持原生 CSS 及 Sass）：
/* 原生 CSS 写法 */
.cms-page-view .column > div > h2 {
background-color: #e6f7ff;
color: #1890ff;
padding: 0.5em 1em;
}// Sass 写法（嵌套语法，语义更清晰）
.cms-page-view {
& .column {
& > div {
& > h2 {
background-color: #e6f7ff;
color: #1890ff;
padding: 0.5em 1em;
}
}
}
}⚠️ 重要注意事项：> 两侧必须有明确的父/子关系，中间不可省略层级。例如 .cms-page-view > .column > div > h2 会失效，因为 .cms-page-view 的直接子是 <div class="column">，而非 .column 类本身（类选择器不改变 DOM 层级）。若 HTML 结构存在动态插入或服务端渲染差异，建议配合 :is() 或 :where() 增强兼容性（现代浏览器），但本例中纯 > 已足够稳健。避免滥用深层嵌套（如 a > b > c > d > e），既降低可维护性，也可能因微小结构变更导致样式断裂；应优先考虑添加语义化类名（如 .page-section-title），> 作为兜底方案。
最终效果：仅第一个示例中 <div><h2>Hello</h2></div> 被高亮，第二个示例中 <section><div><h2>Hola</h2></div></section> 完全不受影响——这正是 > 选择器赋予的结构精确性。掌握多级 > 的组合逻辑，是构建健壮、可预测 CSS 规则的关键能力。
立即学习“前端免费学习笔记（深入）”；
