巧妙去除循环列表最后一个元素下的分隔线
在使用 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;
}
}
}通过这种方式，我们成功地仅对最后一个 .card 元素的 ::after 伪元素进行了样式修改，从而去除了最后一个元素下方的分隔线，实现了预期的效果。 需要注意的是，这种方法利用了 css 选择器的嵌套特性，提高了代码的可读性和可维护性。
