为什么“：last-child”选择器对我不起作用？

Question

在我的应用程序中，我在html中运行对象数组以显示3种不同类型的服务的信息，并且在信息末尾，我想显示一个垂直条，它将充当分隔符。

                <div class="column-service-container">
                  <div
                    class="column-service"
                    v-for="order in filteredOrder"
                    v-bind:key="order.name"
                    :class="{ focusService: order.name == focusService }"
                    @click="focusService = order.name"
                    v-on:click="getOrder()"
                  >
                  <div class="column-service-wrapper">
                    <div class="column-service-text">
                      <div class="item-service-name">{{order.name}}</div>
                      <div class="item-service-description">{{order.full_description}}</div>
                    </div>
                    <div class="item-service-price">
                      {{order.itc.toString().replace(".", ",") }}
                      <span class="price-currency">€</span>
                      <span class="ttc-desc">TTC*</span>
                      <input
                        ref="service"
                        type="radio"
                        name="selectedOrderService"
                        v-model="selectedOrderService"
                        :value="order.name"
                      />
                    </div>
                  </div>
                  <div class="vert-sep"></div>
                </div>
              </div>

正如您在CSS下方看到的那样，我将信息放置在右侧带有分隔符栏的列中。当我想隐藏与最后一列相对应的栏时，就会出现问题。 我尝试使用“ last：child”选择器，如下所示，但这是行不通的。 在这种情况下，它将隐藏该类的3个小节。

.column-service-container {
  display: flex;
  justify-content: center;
}

.column-service {
 
  display: flex;
  justify-content: center;
}

.column-service-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.vert-sep {
  width: 4px;
  height: 200px;
  margin-left: -2px;
  background: $secondaryColor;
}

.vert-sep:last-child {
  display: none;
}