Question

我有一个与Select first Descendant with CSS或How do I hide only the first element of a type?相关的问题，但我的情况与这些问题不符。

我需要定位班级.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>

这是让我们入手的jsfiddle。

Answer 1

您可以使用CSS级联来覆盖之前的规则（适用于更一般的上下文）和更新的规则（适用于更具体的上下文）：

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

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

这正是CSS级联应该如何工作 - 一般规则更高，特定异常更低。

除了嵌套实例之外的所有后代的CSS选择器

1 个答案: