html - 获取最后一个 child (如果是的话)和 previous sibling 姐妹

Question

我有这样的结构:

<div class="as-twl-list-main">
    <div class="as-twl-list-item">

    </div>
    <div class="as-twl-list-item">

    </div>
    <div class="as-twl-list-item">

    </div>
</div>

和这个 scss:

.as-twl-list-item {
    border-bottom: 1px solid $as-twl-line-c;

    &:last-child:nth-child(even):nth-child(-1) {
        border-bottom-color: transparent;
    }
}

我想做的是得到最后一个 child (如果有的话)和前一个 sibling 。有办法吗？

谢谢!

Answer 1

要获取最后一个 child ，即偶数，请使用:

.as-twl-list-item:last-child:nth-child(even) {
  border-bottom-color: transparent;
}

并在使用 nth-last-child 之前获取元素:

.as-twl-list-item:nth-last-child(2):nth-child(odd) {
  border-bottom-color: transparent;
}

请看下面的演示:

.as-twl-list-item {
  border-bottom: 1px solid #ddd;
}
.as-twl-list-item:last-child:nth-child(even) {
  border-bottom-color: transparent;
}
.as-twl-list-item:nth-last-child(2):nth-child(odd) {
  border-bottom-color: transparent;
}

Last child even:
<div class="as-twl-list-main">
  <div class="as-twl-list-item">1</div>
  <div class="as-twl-list-item">2</div>
  <div class="as-twl-list-item">3</div>
  <div class="as-twl-list-item">4</div>
</div>

<br/>
Last child odd:
<div class="as-twl-list-main">
  <div class="as-twl-list-item">1</div>
  <div class="as-twl-list-item">2</div>
  <div class="as-twl-list-item">3</div>
</div>