使用:first-child和:last-child选择器解决border重复的情景

Uniapp开发

        情景：

               v-for循环渲染view组件

                view组件样式：border-top：1rpx solid red；

                                        border-bottom：1rpx solid red；

                会出现boder重复，颜色加深的情况。

使用:first-child和:last-child选择器分别为列表的第一个和最后一个元素添加特定的样式。

例子：

        

<div class="all">
  <div class="container">第一个元素内容</div>
  <div class="container">第二个元素内容</div>
  <div class="container">第三个元素内容</div>
</div>




/* SCSS 样式 */
.all {
  /* 容器样式 */
}

.container {
  padding: 5rpx;
  height: 160rpx;
  margin: 0 auto;
  border-bottom: 1rpx solid #979797;
}

.container:first-child {
  border-top: 1rpx solid #979797; /* 只为第一个.container元素添加顶部边框 */
}