选择最顶级元素[重复]

Question

这个问题在这里已有答案：

• CSS selector for first element with class 17答案
• How to apply css to top level element only 2回答
• Is there a CSS parent selector? 31回答

我有一个HTML代码：

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

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

两个具有相同类别的div元素可能不是直接的孩子和父母彼此，如果可能的话我想通过css-selectors这样做。

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>