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

Question

我正在迭代列表项，我想要实现的是在活动 li（思维导图 3）之前（摘要 2）的元素上没有边框，如 图像所示 它总是为无序列表中的每个元素分配边框，我写了这个 if 条件，它说将边框分配给索引小于无序列表长度的所有 li 项，而不是选定的 li 之前的元素，但它也将左边界分配给在我们的例子中是 summary 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*/
}