使用CSS將頂部和底部邊框添加到一組選定元素

Question

所以我有一個搜索結果網格。這些結果是可選擇的，當它們被選中時，我將它們添加到class='selected'。

可以有多組結果（通過命令/按住Ctrl鍵單擊行來完成）。通過結果分組，我的意思是選擇連續的元素。我想要做的是，只將頂部邊框添加到任何給定結果組中的第一個邊框，並將底部邊框僅添加到給定組的最後一個項目。

有沒有一種很好的方式來做到這一點與CSS？或者我將不得不在每個組中應用.first和.last？

例如，考慮這個近似HTML（行數不完全匹配）：

<ul> 
    <li>Gray row</li> 
    <li class="selected">Blue row - should have border-top-color only</li> 
    <li class="selected">Blue row - should have NO border-top-color or border-bottom-color</li> 
    <li class="selected">Blue row - should have border-bottom-color only</li> 
    <li>Gray row</li> 
    <li>Gray row</li> 
    <li class="selected">Blue row - should have border-top-color and border-bottom-color</li> 
</ul> 

這就是我想要的樣子。這是在Chrome Devtools僞造的。

Answer 1

你可以達到你想要使用選擇的組合像下面摘錄的東西。雖然下面的代碼片段顯示它是可能的，但我仍然會推薦使用類，因爲我相信你會讓JS在Ctrl + Click期間添加類。

這裏是什麼在片段中選擇這樣做：

• .selected - 增加border-top與所需selected類的每個元素。
• .selected + .selected - 否則border-top如果selected元素具有另一個元素，並且緊接在其之前的類別爲selected。
• .selected + :not(.selected) - 爲每個沒有selected類的元素添加border-top，但在其之前有一個類爲selected的元素。這就像組織的border-bottom一樣。
• .selected:last-child - 這適用於last-child是具有selected類的邊緣情況。在這種情況下，先前的選擇器將不適用，因此組的底部邊框將會丟失。

.selected { 
 
    background-color: #DBEAF7; 
 
    border-top: 1px solid #9FC5F8; 
 
} 
 
.selected + .selected { 
 
    border-top: none; 
 
} 
 
.selected +:not(.selected) { 
 
    border-top: 1px solid #9FC5F8; 
 
} 
 
.selected:last-child { 
 
    border-bottom: 1px solid #9FC5F8; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
ul li { 
 
    display: block; 
 
    width: 100px; 
 
    height: 20px; 
 
}

<ul> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
</ul>

Answer 2

這裏我想這樣..

li.selected { 
 
    background-color: #DBEAF7; 
 
    border-top: 1px solid #9FC5F8; 
 
    border-bottom: 1px solid #9FC5F8; 
 
} 
 
.selected{ 
 
    margin-bottom:-1px; 
 
} 
 
.selected + .selected{ 
 
    border-top:none; 
 
    margin-bottom:-1px; 
 
}

<ul> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
</ul> 
 

 
<ul> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li>Processed</li> 
 
    <li class="selected">Rejected</li> 
 
    <li>Processed</li> 
 
</ul>

而這裏的工作演示小提琴

Demo