css 设置元素样式隔行变色

:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。

odd 奇数行

even 偶数行

效果图

页面

1.  
   <template>
2.  
   <div class="page-container">
3.  
   <transition-group tag="ul" appear>
4.  
   <li v-for="item in 10" :key="item">
5.  
   {{ item % 2 == 0 ? "偶数行" : "奇数行" }}
6.  
   </li>
7.  
   </transition-group>
8.  
   </div>
9.  
   </template>

样式

1.  
   li:nth-child(odd) {
2.  
   background: #d9d1d1;
3.  
   }
4.  
   li:nth-child(even) {
5.  
   background: #152a89;
6.  
   }

这篇好文章是转载于：学新通技术网