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

您可以使用下面代码段中的选择器组合来实现您想要的效果。虽然下面的代码段显示它是可能的，但我仍然建议使用类，因为我确信在Ctrl + Click期间你会有JS添加类。

以下是代码段中的选择器：

• .selected - 使用所需的border-top类为每个元素添加selected。
• .selected + .selected - 如果border-top元素前面有另一个selected类的元素，则selected为空。
• .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

我试过这种方式..

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是工作演示小提琴

<强> Demo