css-伪类选择器-:nth-child()-循环样式问题

循环样式：

目标样式：

代码如下：

<view class="grids">    
	<view class="grid" wx:for="{
      {icons}}" wx:for-item="icon" wx:key="icon.itemTypeId" data-item-type-id="{
      {icon.itemTypeId}}" data-type-name="{
      {icon.typeName}}" bindtap="toSercate">        
		<view class="grid__icon">          
			<image src=" {
      {icon.picUrl}}" data-id='{
      {icon.itemTypeId}}' binderror='errLoad'/>        
		view>        
		<text class="grid__label">{
    {icon.typeName}}text>    
	view>  
view>

.grids {
         
	position: relative;    
	overflow: hidden;   
	margin: 20rpx 20rpx 0;   
	background-color: #ffffff;
}  
.grid {
         
	position: relative;    
	float: left;    
	padding: 40rpx 20rpx;    
	width: 50%;    
	box-sizing: border-box;  
}  
.grid:nth-child(2n+1):before {
         
	content: " ";    
	position: absolute;    r
	ight: 0;    
	top: 0;    
	width: 1rpx;    
	bottom: 0;    
	border-right: 1rpx solid #D9D9D9;    
	color: #D9D9D9;    
	transform-origin: 100% 0;    
	transform: scaleX(0.5);  
}  
.grid::after {
     
	content: " ";    
	position: absolute;    
	left: 0;    
	bottom: 0;    
    	right: 0;    
    	height: 1rpx;    
    	border-bottom: 1rpx solid #D9D9D9;    
    	color: #D9D9D9;    
    	transform-origin: 0 100%;    
    	transform: scaleY(0.5);  
}  
.grid:last-child:after {
     
    border-bottom: none;  
}