angularjs - 如何设置border-right : none in a label for the last child?

Question

我有一个 label，它在我的一个 div 中返回不同的名称(很多)，这是它在 html View 中的样子。

<div class="customerDisplayFlex">
      <div class="" *ngFor="let cust of customers">
     <label class="dataLabel">
          <input type="radio"
                  name="user-radio"
                  [value]="customer"
                  [ngModel]="currentCustomerContext"
                  (click)="onCustomerContextchange(customer)"
                  class="dataLabel__input" />

          <span class="customer__label">{{customer.firstName | titleCase}} {{ customer.lastName | titleCase}}</span>
        </label>
</div>
</div>

这是 View 的CSS

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

我什至尝试使用 sass:

.dataLabel{
    color: green;
    border-right: 2px solid grey;
&:last-child{
border-right: none;
}
}

以一种奇怪的方式，这不起作用，我在这里做错了什么？有人可以帮忙吗？谢谢

Answer 1

你不需要:last-child，你想要:last-of-type:

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

.dataLabel:last-of-type {
  border-right: none;
}

<div class="customerDisplayFlex">
  <div class="" *ngFor="let cust of customers">
    <label class="dataLabel">Label 1</label>
    <label class="dataLabel">Label 2</label>
    <label class="dataLabel">Label 3</label>
  </div>
</div>

⋅ ⋅ ⋅

然后，您甚至可以使用 :not 选择器来增强代码，如下所示:

.dataLabel {
  color: green;
}

.dataLabel:not(:last-of-type) {
  border-right: 2px solid grey;
}

<div class="customerDisplayFlex">
  <div class="" *ngFor="let cust of customers">
    <label class="dataLabel">Label 1</label>
    <label class="dataLabel">Label 2</label>
    <label class="dataLabel">Label 3</label>
  </div>
</div>

希望对您有所帮助。