所有子体（嵌套实例除外）的CSS选择器

我有一个关于或的问题，但我的案例与这些问题不符

我需要将所有

.page

类

.example

的后代作为目标，但不包括嵌套

。example

在本例中，我只想针对

#h1-a

和

#h1-c

：

<div class="page">
  <!-- there could be many levels of wrapping -->
  <div>
    <div>
      <div id="h1-a" class="example">
        <h1>h1-a</h1>
        <div>
          <div id="h1-b" class="example">
            <h1>h1-b (nested)</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- or there could be none -->
  <div id="h1-c" class="example">
    <h1>h1-c</h1>
    <div>
      <div id="h1-d" class="example">
        <h1>h1-d (nested)</h1>
      </div>
    </div>
  </div>
</div>

h1-a
h1-b（嵌套）
h1-c
h1-d（嵌套）

---

下面是一个让我们开始学习的方法。

您可以使用CSS级联将早期规则（应用于更一般的上下文）改写为后期规则（应用于更特定的上下文）：

---

这正是CSS级联应该如何工作的——一般规则向上，特定异常向下。

不幸的是，这是不可能的。使用纯CSS最接近的方法是选择所有子体，然后覆盖嵌套子体的样式-

.page .example {
border: 1px solid rgb(127,127,127);
}

.page .example .example {
border: none;
}