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

这里经常会遇见用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不同的样式相关推荐

ul 、ol li 继承原有样式的问题
如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
对于一个ul列表,单击弹出每个li对应的索引
我们经常会遇见在遍历一个ul的时候,需要获得每一个li的索引值,或者是单击每个li弹出其对应的索引值.这里使用闭包的方式来实现这个常见事件.代码如下所示: <!DOCTYPE html> ...
jquery生成一个li_JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁 ...
js遍历（获取）ul中的li
js遍历(获取)ul中的li <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
js遍历ul里面的li里面的值
不多说,直接上代码 <ul id="ul_damainList"><li class="oddli"><span><! ...
如何在现有的ul中添加li？
我的代码看起来像这样: <div id="header"><ul class="tabs"><li><a href=& ...
设置了li(float:right),里面的li反过来显示 - 解决办法
设置了li(float:right),里面的li反过来显示 - 解决办法可以让ul float:right ul里的li 依然float:left 本文转自许琴 51CTO博客,原文链接:http: ...
jsoup解析和遍历一个html文档详解
解析和遍历一个HTML文档如何解析一个HTML文档: String html = "<html><head><title>First parse< ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

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

遍历一个ul设置各个li不同的样式相关推荐

最新文章

热门文章