使用 CSS 为一组选定元素添加顶部和底部边框

Question

所以我有一个搜索结果网格。这些结果是可选择的，当它们被选中时，我将class='selected' 添加到它们。

可以有多组结果（通过 command/ctrl-clicking 行完成）。通过结果组，我的意思是选择的连续元素。我想要做的是，只为任何给定的一组选定结果中的第一个添加上边框，只为给定组的最后一项添加下边框。

有没有使用 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

您可以使用以下 sn-p 中的选择器组合来实现您想要的。虽然下面的 sn-p 表明它是可能的，但我仍然建议使用类，因为我确信你会在 Ctrl + Click 期间让 JS 添加类。

以下是 sn-p 中的选择器的作用：

• .selected - 为每个具有所需 selected 类的元素添加一个 border-top。
• .selected + .selected - 如果 selected 元素有另一个元素紧接在其前面，则 border-top 无效。
• .selected + :not(.selected) - 将border-top 添加到每个没有selected 类但前面有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