时间戳

首页 > 解决方案 > scss 将样式应用于最后一个元素

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

问题描述

我试图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>

我感谢任何帮助或提示。

标签： csssass

解决方案

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

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

推荐阅读