javascript - CSS里:nth-child(n)的n的取值问题

问题描述

问 题

我想实现这样的效果，这个我是通过设置三个类名实现的

但是我想通过CSS3的:nth-child(n)实现，于是这样写了

.lit_box:nth-child(n){
                background: red;
                -webkit-align-self: flex-start;
                align-self: flex-start;
            }
            .lit_box:nth-child(2n){
                background: green;
                -webkit-align-self: center;
                align-self: center;
            }
            .lit_box:nth-child(3n){
                background: blue;
                -webkit-align-self: flex-end;
                align-self: flex-end;
            }
            
            

这样写了后背景是对的，但是为什么效果是这样的

为什么背景正确加上了，而flex-self却不对

解决方案

数学问题，改为3n+x的形式。

.lit_box:nth-child(3n+1){
    background: red;
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.lit_box:nth-child(3n+2){
    background: green;
    -webkit-align-self: center;
    align-self: center;
}
.lit_box:nth-child(3n+3){
    background: blue;
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

这篇关于javascript - CSS里:nth-child(n)的n的取值问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！