我有这个结构:
<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>