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>