本文详解如何使用 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;
      }
    }
  }
}

⚠️ 注意事项：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

立即学习“前端免费学习笔记（深入）”；

• 勿省略中间 >：若写成 .cms-page-view .column div h2（空格分隔），则变为后代选择器，会同时匹配两个示例中的 h2，失去精准性；
• 层级必须严格对应：.column > div > h2 要求 h2 必须是 div 的直接子元素，中间不能插入其他标签（如
  或

  ）；
• 性能与可读性兼顾：> 选择器浏览器解析效率高于复杂伪类（如 :nth-of-type），且语义明确，利于团队协作与后期维护；
• HTML 不可修改时的首选方案：正如问题所述，当无法调整 DOM 结构添加专属 class 或 data 属性时，利用现有层级关系 + > 是最稳健的 CSS-only 解法。

总结：精准控制样式作用域的关键，在于将 HTML 的嵌套结构转化为 CSS 的选择器路径。善用 > 不仅能解决本文的 h2 定位问题，更适用于表单控件、卡片组件、导航菜单等任何需要“隔代限定”的场景。坚持“最小必要层级”原则——只写必需的 >，既保障准确性，又提升代码健壮性。