有没有办法将 border bottom 动态设置为最后一个元素，有时甚至是最后两个元素？

Question

我已经为此苦苦挣扎了一段时间。我有一个仪表板显示一些带有值的标签。仪表板中值的数量是动态的。我用网格构建了它，所以每次我有奇数个值时，最后一个值都有自己的行。我的任务是让仪表板的最后一行不使用 border-bottom，因为它会破坏它的外观。

我尝试使用 :last-child，但只有当我的仪表板中的值数量为奇数时才有效。当我的仪表板中有偶数个元素时，:nth-last-child(-n+2) 以最后两个元素为目标。

甚至:

奇数:

当我的仪表板中有奇数和偶数个值时，有没有办法动态设置最后一行不使用 border-bottom？

Answer 1

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  margin: 2em;
  bordr: 1px solid black;
}

.item{
  border-bottom: 1px solid black;
}

.item:last-child,
.item:nth-last-child(2):nth-child(odd){
  border-bottom: none;
  color: red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

尝试 select :last-child 和 :last-child 仅当它的奇数元素为：

:last-child,
:nth-last-child(2):nth-child(odd){
   //...
}

有没有办法将 border bottom 动态设置为最后一个元素，有时甚至是最后两个元素？

Is there a way to dynamically set border bottom to the last element, and sometimes the last two elements?

html

css

grid

sass