css 设置元素样式隔行变色

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