nth-child选择器

image.png

一、偶数：nth-child(2n)

    
        {{index + 1}}
    


二、奇数：nth-child(2n-1)

    
        {{index + 1}}
    


三、从第6个开始到最后：nth-child(n+6)

    
        {{index + 1}}
    


四、第1个到第6个：nth-child(-n+6)

    
        {{index + 1}}
    


五、第6个到第9个：nth-child(n+6):nth-child(-n+9)

    
        {{index + 1}}
    


六、第1个：first-child()

    
        {{index + 1}}
    


七、最后1个：last-child()

    
        {{index + 1}}
    


八、倒数第3个：nth-last-child(3)

    
        {{index + 1}}
    


九、倒数最后3个：nth-last-child(-n+3)

    
        {{index + 1}}
    

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