如何用CSS选择最后一个.item-line元素并设置display:none？

要隐藏最后一个.item-line，可以通过纯CSS定位目标元素，或者在Vue渲染阶段直接控制元素显示，两种方案如下：

方法一：纯CSS实现 #

观察生成的HTML结构，所有步骤项都嵌套在.stepper-container的子div中，只需选中最后一个子div内的.item-line即可：

/* 选中stepper-container下最后一个直接子div中的.item-line */
.stepper-container > div:last-child .item-line {
    display: none;
}

如果容器类名有变动，也可以用:last-of-type替代：

.stepper-container > div:last-of-type .item-line {
    display: none;
}

为什么之前的尝试无效？ #

每个.stepper-wrapper内部只有两个子元素：第一个是.stepper-item，第二个是.item-line。你之前用:nth-child(3)是试图查找每个.stepper-wrapper里的第三个子元素，但这个元素根本不存在，所以所有尝试都无法命中目标。我们需要定位的是整个步骤列表的最后一个步骤项，再选中它内部的线条元素。

方法二：Vue渲染时控制（更灵活） #

在Vue的v-for循环中，直接判断当前项是否为最后一个，通过指令或动态类控制线条显示：

方式1：直接控制元素显示 #

<div v-for="(step, i) in steps" :key="step.name">
    <div class="stepper-wrapper d-flex flex-column">
        <!-- 省略步骤内容 -->
        <!-- 仅非最后一步显示线条 -->
        <span class="item-line" v-if="i !== steps.length - 1"></span>
    </div>
</div>

方式2：添加动态隐藏类 #

<div v-for="(step, i) in steps" :key="step.name">
    <div class="stepper-wrapper d-flex flex-column">
        <!-- 省略步骤内容 -->
        <span class="item-line" :class="{ 'hidden-line': i === steps.length - 1 }"></span>
    </div>
</div>

对应的CSS：

.hidden-line {
    display: none;
}

内容的提问来源于stack exchange，提问作者Ignacio García