flex布局中怎么设置奇偶行不同

Question

flex布局怎么设置奇数行和偶数行显示不同的背景颜色呢？相关代码        .list-area {            display: flex;            flex-wrap: wrap;            align-content: flex-start;            justify-content: space-between;        }        .list-item {            width: 200px;            height: 200px;            margin-right: 20px;            margin-bottom: 20px;            background: green;        }<div class="list-area">    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div>    <div class="list-item"></div></div>期待能够实现每一行显示不同的背景颜色，但是flex里面好像没有行的概念，都是根据list-area来计算每一行有多少个元素的

Answer 1

.list-area .list-item:nth-of-type(odd) {

}

.list-area .list-item:nth-of-type(even) {

}