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