Vue.js循环列表中如何巧妙去除最后一个元素的分隔线？

巧妙去除循环列表最后一个元素下的分隔线

在使用 vue.js 构建项目时，我们经常需要在循环生成的列表元素之间添加分隔线，以增强视觉效果和可读性。 一个常用的方法是利用 css 的 ::after 伪元素在每个元素下方添加一条线。然而，这会造成最后一个元素下方也出现一条多余的分隔线。本文将详细讲解如何解决这个问题，并避免最后一条分隔线的出现。

问题描述如下：开发者希望在每个 .card 元素（由 vue 的 v-for 指令循环生成）下方添加一条分隔线，但最后一个 .card 元素不需要分隔线。 最初尝试使用 :not(:last-child)::after 选择器未能成功。 同时，调整 margin-bottom 也未能解决问题，&:last-child 和 &:nth-last-child(1) 选择器对 margin-bottom 的修改无效。

核心问题在于如何仅针对最后一个 .card 元素的 ::after 伪元素进行样式调整，使其不显示。

解决方案的关键在于嵌套使用 css 选择器。 我们可以通过在 .card 的样式中，先定义 ::after 伪元素的样式，然后使用 &:last-child 选择器，再在其内部再次定义 ::after 伪元素的样式，将其设置为 display: none;，从而隐藏最后一个元素下的分隔线。 完整的代码如下：

立即学习“前端免费学习笔记（深入）”；

.card {  position: relative;  width: auto;  margin: 25px 0 50px 0;  &::after {    content: '';    width: 886px;    height: 1px;    position: absolute;    bottom: -25px;    background-color: #DDDDDD;  }  &:last-child {    &::after {      display: none;    }  }}

登录后复制