选择最顶层的元素

Question

我有一个html代码：

<div class="body">
    <p></p>
    <div class="select">
        <p class="p1"></p>
        <div class="select"></div>
        <p class="p2"></p>
    </div>
</div>

我想选择类div的{​​{1}}元素。我需要父级一个这样的元素。我怎样才能做到这一点？请注意，以上代码仅是示例，代码可能会变得任意复杂。

两个具有相同类的select元素可能不是彼此的直接子代和父代，如果可能，我想通过div来实现。

Answer 1

设置.select的样式，然后覆盖.select .select中的样式：

.select {
  /* top level select element */
  color: red;
}

.select .select {
  /* reset styles in nested select element */
  color: initial;
}

<div class="body">
    <p>Text</p>
    <div class="select">
        <p class="p1">Top Level Select</p>
        <div class="select">Nested Select</div>
        <p class="p2">Top Level Select</p>
    </div>
    <div>
        <p class="p1">Text</p>
        <div class="select">Top Level Select</div>
        <p class="p2">Text</p>
    </div>
</div>