尝试选择ul的选定li元素的先前li元素

Question

我正在遍历列表项，我想要实现的是在活动li（Mindmap 3）之前（摘要2）的元素上没有边框的右边界，如 image所示，它总是为无序列表中的每个元素分配边框，我写了这个 if 条件，说对所有索引小于无序列表长度的li项目分配边框，而不是选择的li之前的元素，但在本例中，它还会为该元素摘要2 分配border-left。我认为if条件有问题，但是我无法弄清楚是什么？

<ul class="nav nav-tabs">
  <li *ngFor="let tab of tabs; let i = index" (click)="selectTab(tab)" 
      [class.active]="tab.active"
      [class.border]="(i < tabs.length - 1) && !(tabs[i+1]?.active)">
    <div>
      <div>
        <img class="icon" style="width: 18px;"
             src="../../../assets/icons/{{tab.icon}}.svg">
       {{tab.title}} {{i}}
    </div>
    </div>
  </li>
</ul>

Css定义如下。

.active {
  border: 1px solid #eaeef0;;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid white;
  margin-bottom: -6px;
  height: 44px;
}

.border {
  border-right: 1px solid red;
}

Answer 1

我认为您无需选择上一个li元素即可删除边框。只需设置左边框而不是右边框，并按如下所示修改CSS。

li {
    border-left: 1px solid red;
}

li:nth-child(1) {
    border-left:none; /*First element should not have a left border*/
}

li.active {
    border-left: none;/*Border definition for active element*/
}