Question

我正在尝试仅将border-bottom添加到最后一个元素。我有以下scss代码：

.practiceTypeItem {
  &__container {
    border-top: 2px solid #E5E9F1;
  }
}

.practiceTypeItem:last-child {
  &__container {
    border-bottom: 2px solid #E5E9F1;
  }
}

但是，它会编译为该CSS，这当然是错误的。伪选择器last-child变成了类名。

.practiceTypeItem__container {
  border-top: 2px solid #E5E9F1;
}
.practiceTypeItem:last-child__container {
  border-bottom: 2px solid #E5E9F1;
}
.luna-choice-list-item {
  margin-bottom: 0 !important;
}

这是我的html：

<ul>
  <li class="practiceTypeItem">
    <div class="practiceTypeItem__container">
      <label for="radio-foobar"><input type="radio" name="practiceTypeId" id="radio-1" value="1">Hello world</label>
    </div>
  </li>
  <li class="practiceTypeItem">
    <div class="practiceTypeItem__container">
      <label for="radio-foobar"><input type="radio" name="practiceTypeId" id="radio-1" value="1">Hello world</label>
    </div>
  </li>

  <li class="practiceTypeItem">
    <div class="practiceTypeItem__container">
      <label for="radio-foobar"><input type="radio" name="practiceTypeId" id="radio-1" value="1">Hello world</label>
    </div>
  </li>
</ul>

感谢您的帮助或提示。

Answer 1

<ul class="navbar-nav mr-auto">

Answer 2

您可以将父元素设置为变量并引用该变量：

.practiceTypeItem {
    // This is the parent (.practiceTypeItem)
    $p : &;
    
    &__container {
        border-top: 2px solid #E5E9F1;
    }

    &:last-child {
        #{$p}__container {
            border-bottom: 2px solid #E5E9F1;
        }
    }
}

编译为：

.practiceTypeItem__container {
  border-top: 2px solid #E5E9F1;
}

.practiceTypeItem:last-child .practiceTypeItem__container {
  border-bottom: 2px solid #E5E9F1;
}

Answer 3

尝试一下：

.practiceTypeItem {
  &:last-child {
    &__container {
      border-bottom: 2px solid #E5E9F1;
  }
 }
}

scss将样式应用于最后一个元素

3 个答案: