使用css last-child 为什么会被全覆盖？

Question

.choose-nav_span:last-child {
  &::after {
    content: '';
    padding: 0;
  }
}
.choose-nav_span {
  @extend .cursor_pointer;
  &::after {
    content: '/';
    padding: 0 3px;
  }
}
dom

结果

Answer 1

.choose-nav_span都是父级span元素的最后一个元素

Answer 2

你现在的结构是这样的，这样是所有choose-nav_span节点都是最后一个

<span>
    <span class="choose-nav_span"></span>
</span>
<span>
    <span class="choose-nav_span"></span>
</span>

改成这样，或者给父级加类筛选last-child

<span>
    <span class="choose-nav_span"></span>
    <span class="choose-nav_span"></span>
</span>

Answer 3

因为他们不是兄弟元素，所以相对他们自身来说都是属于最后一个元素！

Answer 4

你每个.choose-nav_span的外面都有一层span，相当于每个.choose-nav_span都有自己的爸爸，而且自己还是唯一的儿子，那当然每个.choose-nav_span都是最后一个儿子

<span> <!-- 我是爸爸 -->
    <span class="choose-nav_span"></span> <!-- 我是唯一的儿子 -->
</span>
<span> <!-- 我是爸爸 -->
    <span class="choose-nav_span"></span> <!-- 我是唯一的儿子 -->
</span>

要让他们变成兄弟元素，在一个父元素下

<div class="box">
    <span> <!-- 我是爸爸 -->
        <span class="choose-nav_span"></span> <!-- 我是大哥 -->
        <span class="choose-nav_span"></span> <!-- 我是二哥 -->
        <span class="choose-nav_span"></span> <!-- 我是最后的儿子 -->
    </span>
</div>

我看你.choose-nav_span外面套的span没有类名，如果父元素span没有兄弟元素的话可以去掉，直接让容器作父元素就行