這里經(jīng)常會(huì)遇見(jiàn)用CSS操作一個(gè)數(shù)組，設(shè)置第一個(gè)元素的樣式與其他元素的樣式不一樣，這里分析一下常見(jiàn)的幾種類型：

第一種：數(shù)組第一個(gè)元素和其他元素設(shè)置不同的樣式

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

第二種：數(shù)組奇數(shù)元素和偶數(shù)元素設(shè)置不同的樣式

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

第三種：數(shù)組第2元素和其他元素設(shè)置不同的樣式

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; } //這里如果執(zhí)行不了，在前面在加上更高階的父類 .setColor ul li:nth-of-type(2) { width: 49%;background-color: red; } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。