css 使样式在最后一个元素上不生效

最新推荐文章于 2024-08-20 13:42:14 发布

mygoes

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量4.3k

点赞数

文章标签： css less scss

本文链接：https://blog.csdn.net/mygoes/article/details/112280039

版权

本文介绍了如何使用CSS选择器来实现样式不在最后一个或倒数第二个元素上生效。通过添加`.el-col:last-child`和`.el-col:nth-last-child(2)`选择器，可以分别取消对最后一个和倒数第二个元素的`margin-bottom`样式，确保在循环渲染后的列表中，只有其他元素有底部外边距。

摘要由CSDN通过智能技术生成

css 使样式在最后一个元素上不生效

在一些情况下，比如：
循环渲染后，要给所有元素(最后一个元素除外)都加上一个margin-bottom: 20px;，这时候只要写css多加一行代码即可

代码(格式用了scss预处理)：

.el-col {
        margin-bottom: 20px;
        // 加上这行代码即可：
        &:last-child { margin-bottom: 0; }
      }

原生css：

.el-col { margin-bottom: 20px; }
// 使样式在最后一个元素上不生效：
.el-col:last-child { margin-bottom: 0; }

番外

css 使样式在倒数两个元素上不生效

.el-col { margin-bottom: 20px; }
// 使样式在倒数第一个元素上不生效：
.el-col:last-child { margin-bottom: 0; }
// 使样式在倒数第二个元素上不生效：
.el-col:nth-last-child(2) { margin-bottom: 0; }