Angular中为何为最后一个label设置border-right:none不生效？

首先得指出你两个关键问题：

1. CSS选择器的逻辑错误 #

你的*ngFor是循环渲染外层的<div>，而.dataLabel是每个循环div里的唯一子元素——也就是说，每个.dataLabel都是它直接父级（那个循环出来的空div）的:last-child，所以所有的label都会被应用border-right: none，这和你想要的「只有最后一个客户的label去掉右边框」完全相反了。

2. 模板变量名写错了 #

你在*ngFor里定义的循环变量是cust，但后面绑定的[value]="customer"、(click)="onCustomerContextchange(customer)"用的是customer，这会导致变量未定义的错误，得统一改成cust。

解决方案一：修正CSS选择器 #

直接定位到.customerDisplayFlex下最后一个循环div里的.dataLabel，这样就能精准去掉最后一个客户label的右边框：

普通CSS写法

.dataLabel{
  color: green;
  border-right: 2px solid grey;
}
/* 选中父容器最后一个子div里的label */
.customerDisplayFlex > div:last-child .dataLabel{
  border-right: none;
}

Sass写法

.dataLabel{
  color: green;
  border-right: 2px solid grey;
}

.customerDisplayFlex{
  > div:last-child{
    .dataLabel{
      border-right: none;
    }
  }
}

解决方案二：调整样式到循环的div上（更推荐） #

把右边框直接加到循环的div上，因为这些div是同级元素，逻辑更直观：

第一步：给循环div加类名

<div class="customerDisplayFlex">
  <!-- 给循环div加customer-item类 -->
  <div class="customer-item" *ngFor="let cust of customers">
    <label class="dataLabel">
      <input type="radio" name="user-radio" [value]="cust" [ngModel]="currentCustomerContext" (click)="onCustomerContextchange(cust)" class="dataLabel__input" />
      <span class="customer__label">{{cust.firstName | titleCase}} {{ cust.lastName | titleCase}}</span>
    </label>
  </div>
</div>

第二步：编写CSS

.dataLabel{
  color: green;
}
/* 给每个循环div加右边框 */
.customer-item{
  border-right: 2px solid grey;
}
/* 去掉最后一个div的右边框 */
.customer-item:last-child{
  border-right: none;
}

这样不仅解决了边框的问题，模板变量的错误也一并修正了，功能和样式都会正常工作。

内容的提问来源于stack exchange，提问作者Hot Zellah