获取最后一个孩子（如果有的话）和上一个兄弟姐妹答案

【问题标题】：Get the last child (if it even) and the prev sibling获取最后一个孩子（如果有的话）和上一个兄弟姐妹
【发布时间】：2017-01-02 23:37:46
【问题描述】：

我有这个结构：

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

我要做的是获取最后一个孩子（如果有的话）和上一个兄弟姐妹。有办法吗？

谢谢！

【问题讨论】：

标签： html css sass css-selectors

【解决方案1】：

为了得到 last child 这是 even 使用这个：

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

【讨论】：

@ZeevKatz 让我知道您对此的看法，谢谢！
太棒了！以这种方式完美运行：fiddle.jshell.net/m8tbhvx2
如果你能检查我的小提琴，也许你有更好的解决方案，谢谢！