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>