试图选择ul的所选li元素的前一个li元素

Question

我遍历列表项，我想要实现的是没有那个是以前的元素（摘要2）主动力（思维导图3）在右边框，如图所示， 图像总是分配边框每在无序列表中的元素，我写了这个条件， 如果条件为所有li项目分配索引小于无序列表的长度，而不是选择li之前的元素，但它也分配边界 -留给那个在我们的例子中是摘要2的元素。 我认为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*/
}