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

Question

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

但是我想通过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却不对

Answer 1

数学问题，改为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;
}

Answer 2

大兄弟你写个flex的DEMO, 就要问这么多次问题.
https://segmentfault.com/q/10...
刚刚的才解决呢. 这又来问.
用用搜索引擎吧.
或者看完文档再写.
不要把别人当搜索引擎.