本文详解如何使用 css 的 `>` 直接子选择器（child combinator）构建多层嵌套选择路径，精准定位目标元素（如 `.cms-page-view .column > div > h2`），避免误选深层嵌套的同名标签，无需依赖 `:first-child` 等位置伪类。
在实际前端开发中，常需对结构相似但嵌套深度不同的 HTML 元素进行差异化样式控制。例如，你希望仅给「位于 .column 下的直接子 div 内部的直接子 h2」设置样式，而忽略嵌套在
中的 h2 —— 此时，直接子选择器 > 是最语义清晰、性能高效且可维护性强的解决方案。
核心原理在于：A > B 仅匹配作为 A 元素直接子元素的 B 元素，不包含任何后代（descendant）关系。因此，要精确命中第一个示例中的
Hello
，而排除第二个示例中
Hola
（它位于 section > div > h2 路径中），应构建如下选择器链：
.cms-page-view .column > div > h2 { color: blue; font-weight: bold; }该选择器含义为：
✅ 匹配所有拥有 class=”cms-page-view” 的元素；
✅ 在其内部查找 class=”column” 的直接子 div；
✅ 再在其内部查找该 div 的直接子 div（即 .column > div）；
✅ 最终选取该 div 的直接子 h2（即 > h2）。
对应 sass/Scss 写法（更符合原始问题中的嵌套风格）：
.cms-page-view { & .column { & > div { & > h2 { color: blue; font-weight: bold; } } } }⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 勿省略中间 >：若写成 .cms-page-view .column div h2（空格分隔），则变为后代选择器，会同时匹配两个示例中的 h2，失去精准性；
- 层级必须严格对应：.column > div > h2 要求 h2 必须是 div 的直接子元素，中间不能插入其他标签（如
或 ）； - 性能与可读性兼顾：> 选择器浏览器解析效率高于复杂伪类（如 :nth-of-type），且语义明确，利于团队协作与后期维护；
- HTML 不可修改时的首选方案：正如问题所述，当无法调整 DOM 结构添加专属 class 或 data 属性时，利用现有层级关系 + > 是最稳健的 CSS-only 解法。
总结：精准控制样式作用域的关键，在于将 HTML 的嵌套结构转化为 CSS 的选择器路径。善用 > 不仅能解决本文的 h2 定位问题，更适用于表单控件、卡片组件、导航菜单等任何需要“隔代限定”的场景。坚持“最小必要层级”原则——只写必需的 >，既保障准确性，又提升代码健壮性。