![8ef5b53bbb1379918dc2b50278b22327.png](https://i-blog.csdnimg.cn/blog_migrate/3e6a39730766474d0c5543a8025c7602.jpeg)
问题背景
在设计页面时,我们经常会遇到类似这样的页面布局:
![429bc2854f3c96e72fdd27b109a02639.png](https://i-blog.csdnimg.cn/blog_migrate/3760c47eb50fb46b062e9cecb2e1b7b3.png)
图中一个容器内有多个内容块,每块都有一个底部的下划线,但是一般为了美观,最后一个内容块儿的下划线是要去掉的
接下来我们看看通常情况下,是如何处理这种样式的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 此处为基本的展示样式,可以忽略不看 */
.container{
border: 1px solid black;
border-radius: 10px;
width: 300px;
height: 500px;
margin: 100px auto;
}
.child{
margin: 0 auto;
width: 200px;
height: 98px;
border-bottom: 1px solid rgb(172, 163, 163);
line-height: 98px;
}
/* 此处为重点要看的样式 */
.last{
border-bottom: 0;
}
</style>
</head>
<body>
<div class="container"></div>
<script>
const elementList = ['我是内容1','我是内容2','我是内容3','我是内容4','我是内容5']
co