
image.png
<view class="title">一、偶数:nth-child(2n)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style1" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">二、奇数:nth-child(2n-1)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style2" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">三、从第6个开始到最后:nth-child(n+6)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style3" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">四、第1个到第6个:nth-child(-n+6)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style4" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">五、第6个到第9个:nth-child(n+6):nth-child(-n+9)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style5" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">六、第1个:first-child()</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style6" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">七、最后1个:last-child()</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style7" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">八、倒数第3个:nth-last-child(3)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style8" wx:key="index">
{{index + 1}}
</view>
</view>
<view class="title">九、倒数最后3个:nth-last-child(-n+3)</view>
<view class="view_ll">
<view wx:for="{{10}}" class="item_view style9" wx:key="index">
{{index + 1}}
</view>
</view>
.title {
color: black;
font-size: 30rpx;
margin-top: 30rpx;
}
.view_ll {
display: flex;
margin-top: 8rpx;
}
.item_view {
width: 55rpx;
height: 55rpx;
line-height: 55rpx;
margin: 10rpx;
text-align: center;
color: white;
background: blue;
/*偶数*/
&.style1 {
&:nth-child(2n){
background: red;
}
}
/*奇数*/
&.style2 {
&:nth-child(2n-1){
background: red;
}
}
/*从第6个开始到最后*/
&.style3 {
&:nth-child(n+6){
background: red;
}
}
/*第1个到第6个*/
&.style4 {
&:nth-child(-n+6){
background: red;
}
}
/*第6个到第9个*/
&.style5 {
&:nth-child(n+6):nth-child(-n+9) {
background: red;
}
}
/*第一个*/
&.style6 {
&:first-child {
background: red;
}
}
/*最后一个*/
&.style7 {
&:last-child {
background: red;
}
}
/*倒数第3个*/
&.style8 {
&:nth-last-child(3) {
background: red;
}
}
/*倒数最后3个*/
&.style9 {
&:nth-last-child(-n+3) {
background: red;
}
}
}
网友评论