:nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。
odd 奇数行
even 偶数行
效果图
页面
<template>
<div class="page-container">
<transition-group tag="ul" appear>
<li v-for="item in 10" :key="item">
{{ item % 2 == 0 ? "偶数行" : "奇数行" }}
</li>
</transition-group>
</div>
</template>
样式
li:nth-child(odd) {
background: #d9d1d1;
}
li:nth-child(even) {
background: #152a89;
}