遍历一个ul设置各个li不同的样式

来源：互联网发布：u盘检测工具知乎编辑：程序博客网时间：2024/06/07 05:40

这里经常会遇见用CSS操作一个数组，设置第一个元素的样式与其他元素的样式不一样，这里分析一下常见的几种类型：

第一种：数组第一个元素和其他元素设置不同的样式

var arry = [11,22,33,44,55,66]

<div class="setColor">    <ul>        <li v-for="item in arry "></li>   </ul></div>

.setColor  ul li:first-child {    width: 49%;    background-color: red;}.setColor  ul li:nth-child(2) {    width: 49%;    background-color:green;}

第二种：数组奇数元素和偶数元素设置不同的样式

var arry = [11,22,33,44,55,66]

<div class="setColor">    <ul>        <li v-for="item in arry "></li>   </ul></div>

.setColor  ul li:nth-child(2n+1) {    width: 49%;    background-color: red;}.setColor  ul li:nth-child(2n) {    width: 49%;    background-color:green;}

第三种：数组第2元素和其他元素设置不同的样式

var arry = [11,22,33,44,55,66]

<div class="setColor">    <ul>        <li v-for="item in arry "></li>   </ul></div>

.setColor  ul li{    width: 49%;    background-color:green;}//这里如果执行不了，在前面在加上更高阶的父类.setColor  ul li:nth-of-type(2) {     width: 49%;    background-color: red;}

0 0