這里經常會遇見用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; } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的遍历一个ul设置各个li不同的样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。