css 找到最近的元素

Question

我有一个包含相同元素的嵌套结构。为了只针对当前集合中的元素，我做了这样的事情:

.set1 > .content > .trigger {
  background: red;
}

在现实生活中，这个选择器有更多的元素。虽然它有效，但如果我更改其中一个元素的名称或深度，它将不再有效。

有没有办法只找到当前集合的 .trigger(在本例中)？

<div class="set set1">
  <div class="content">
    <div class="trigger"></div>
    <div class="set set2">
      <div class="content">
        <div class="trigger"></div>
      </div>
    <div>
  </div>
<div>

Answer 1

您可以对当前集合中的所有触发器应用样式，然后为第一个触发器之后的其他触发器删除样式。

div {
  padding: 5px;
  border: 1px solid;
}

.set1 .trigger {
  background: red;
}

.set1 .trigger ~ .set .trigger {
  background: none;
}

<div class="set set1">
  <div class="content">
    <div class="trigger"></div>
    <div class="set set2">
      <div class="content">
        <div class="trigger"></div>
      </div>
    </div>
  </div>
</div>