我有这个结构:

<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;
    }
}


我想做的是得到最后一个孩子(如果有的话)和上一个兄弟姐妹。
有办法做到吗?

谢谢!

最佳答案

为了得到最后一个孩子,甚至可以使用以下命令:

.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>

07-24 09:46
查看更多