如何定位div的直接子对象h2，但同时确保任何其他h2不被更改。
在一个地方我有这个标记。

<div class="cms-page-view">
  <div class="column">
    <div></div>
    <div></div>
    <div>
        <h2>Hello</h2>    <!-- Target this -->
        <p>Some Text</p>
    </div>
  </div>
</div>

在另一个地方，我有这个标记。

<div class="cms-page-view">
  <div class="column">
    <div></div>
    <div></div>
    <div>
        <section>
          <div>
           <h2>Hola</h2> <!-- Make sure this does not change -->
           <p>Some Text</p>
          </div>  
        </section>
    </div>
  </div>
</div>

有没有办法不使用:first-child或:nth-child()来实现这一点。
我试过这个，但它不工作：

.cms-page-view {
  & .column {
    & div {
      & > h2 {
        color: blue;
      }
    }
  }
}