选择最顶层元素[重复]答案

【问题标题】：Select most top level element [duplicate]选择最顶层元素[重复]
【发布时间】：2019-02-27 23:13:08
【问题描述】：

我有一个 html 代码：

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

我想选择类select 的div 元素。这种类型有两个元素，我想要父元素。我怎样才能做到这一点？注意上面的代码只是一个例子，代码可以任意变复杂。

具有相同类的两个 div 元素可能不是彼此的直接子元素和父元素，如果可能的话，我想通过 css-selectors 执行此操作。

【问题讨论】：

@Paulie_D 我不认为这是重复的 - 如果有任何 parent selector 问题将更多的是重复的 OP 正在寻找类的根而不是类的第一

标签： html css css-selectors

【解决方案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>

【讨论】：