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

zhangXY_

于 2019-05-08 11:18:39 发布

阅读量1.8k

点赞数 1

分类专栏：小程序开发文章标签： css伪类选择器循环样式修改某个 nth-child()

本文链接：https://blog.youkuaiyun.com/weixin_43549408/article/details/89947825

版权

小程序开发专栏收录该内容

12 篇文章

订阅专栏

本文探讨了如何使用CSS的:nth-child()伪类选择器来实现元素的循环样式。通过实例代码展示了如何精确地修改循环中的某个元素样式，为前端开发者提供了一种有效的方法来控制布局的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

循环样式：
在这里插入图片描述

目标样式：
在这里插入图片描述

代码如下：

<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;  
}