如何定位父元素的直接子选择器？排除嵌套h2样式干扰

核心思路 #

用**直接子选择器>**锁定div的直接子h2，再通过上下文限定和排除规则，确保只作用于目标元素，不影响其他嵌套或无关的h2。

目标HTML与排除HTML示例 #

目标作用的HTML结构（第一段）：

<div class="cms-page-view">
  <div class="column">
    <div>
      <h2>需要设置样式的标题</h2> <!-- 这是我们要选中的直接子h2 -->
      <div>
        <h2>不需要设置样式的嵌套标题</h2> <!-- 非直接子级，自动被排除 -->
      </div>
    </div>
  </div>
</div>

需要排除的HTML结构（第二段）：

<section>
  <div>
    <h2>不受样式影响的标题</h2> <!-- 要排除的元素 -->
  </div>
</section>

正确的SCSS代码 #

// 仅选中 .cms-page-view .column 下的div直接子h2
.cms-page-view .column div > h2 {
  color: #2d3748;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

// 若需更严谨排除section内的div子h2，可优化选择器：
.cms-page-view .column div:not(section div) > h2 {
  // 应用相同样式即可
}

常见失效原因与解决 #

你之前的代码没生效，大概率是这几个问题：

• 没用到>直接子选择器，导致选中了所有后代h2（包括嵌套的）
• 选择器上下文没限定到.cms-page-view .column，范围太宽或太窄
• 不小心包含了section内的div，此时用:not()伪类就能精准排除，完全不需要first-child或nth-child

内容的提问来源于stack exchange，提问作者Sara Whitmore