nth-child选择器

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