效果图如下
需求说明
不就是加一条分割线吗？有什么难的？
这可不是普通的分割线
每行数据的下面需要有一条分割线，最后一行数据底部无需分割线，如果某行数据为空，则该行不显示（所以这条线不能写死）
解决方案
给css样式用上CSS的兄弟选择器 +
代码详情
HTML代码
//父级<view class="labelbg">//子级1<view class="labelbg__contentPropertyBox"><text class="labelbg__contentPropertyBox__labelTitle">完成时间</text><text class="labelbg__contentPropertyBox__labelContent">{{model.checkPlanBo && model.checkPlanBo.executeUserName}}</text></view>//子级2<view class="labelbg__contentPropertyBox"><text class="labelbg__contentPropertyBox__labelTitle">是否逾期</text><text class="labelbg__contentPropertyBox__labelContent" :style="{color: model.overdueName == '是' ? '#34C759' : '#FF4042'}" >{{model.overdueName}}</text></view>//子级3<view class="labelbg__contentPropertyBox"><text class="labelbg__contentPropertyBox__labelTitle">问题总数</text><text class="labelbg__contentPropertyBox__labelContent">{{model.abnormalNum||0}}</text></view></view>
css代码
//看过来 就是这样写的//下面也有写到contentPropertyBox 只要把兄弟元素有区别的样式拎出来写在这里就可以.labelbg__contentPropertyBox + .labelbg__contentPropertyBox{width: 686rpx;border-top-width:0.5rpx;border-top-style:solid;border-top-color:$gray-7;}.labelbg{width: 750rpx;background-color: $uni-bg-color;//就是这里 把兄弟元素相同的样式放这里&__contentPropertyBox {flex-flow: row;justify-content: flex-start;display: flex;padding-top: 29rpx;padding-bottom: 29rpx;margin:0rpx 32rpx 0rpx 32rpx;&__labelTitle{font-size: 30rpx;color: $gray-3;width: 156rpx;}&__labelContent{font-size: 30rpx;color: $gray-1;width: 530rpx;}}
补充知识
示例效果图：
1.+
(1)同一个父元素的不同元素兄弟，+只会影响后面对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)
ul + p{
color:green;
}
效果图：
(2)同一个父元素的相同元素兄弟，+会循环依次影响对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)
li + li{
color:red;
}
效果图：
2.~
(1)同一个父元素的不同元素兄弟，~会影响后面对应标签的所有兄弟节点的标签样式。(并不影响前面的兄弟节点)
ul ~ p{
color:green;
}
效果图：
(2)同一个父元素的相同元素兄弟，~只会影响后面对应标签的所有兄弟节点的标签样式。(并不影响前面的兄弟节点)
li ~ li{
color:red;
}
效果图：
3.综上
(1)+和~都不会影响元素前面的兄弟节点的样式
(2)+只会影响对应的后面第一个(相邻的)兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式。
来源： /jarisMA/article/details/100105595
