有没有办法将边框底部动态设置为最后一个元素，有时是最后两个元素？答案

【问题标题】：Is there a way to dynamically set border bottom to the last element, and sometimes the last two elements?有没有办法将边框底部动态设置为最后一个元素，有时是最后两个元素？
【发布时间】：2021-08-19 18:47:52
【问题描述】：

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

我尝试使用:last-child，但这仅在我的仪表板中有奇数个值时才有效。 :nth-last-child(-n+2) 也是如此，当我的仪表板中有偶数个元素时，它会针对最后两个元素。

偶数：

奇数：

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

【问题讨论】：

标签： html css sass grid

【解决方案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>

尝试选择 :last-child 和 :last-child 仅当其和奇数元素：

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

【讨论】：