请选择 进入手机版 | 继续访问电脑版
 找回密码
 注册
首页 ≡≡网络技术≡≡ WEB前端 利用css给奇数行或偶数行添加指定样式

css 利用css给奇数行或偶数行添加指定样式

灰儿 2019-11-29 09:14:02
利用css给奇数行或偶数行添加指定样式


odd表示奇数行,even表示偶数行;
tr:nth-child(odd);
.table-striped > tbody > tr:nth-child(odd) {
background-color: #f9f9f9;
}



#list li:nth-of-type(odd){ background:#00ccff;}奇数行
#list li:nth-of-type(even){ background:#ffcc00;}偶数行


.list ul li:nth-child(even){ ...}    //li的偶数行样式

.list ul li:nth-child(odd){ ...}    //li的奇数行样式



.list ul li:nth-child(1){ top:0;}       //第一个li
.list ul li:nth-child(2){ top:30px;}    //第二个li



部分情况下的解决方案



<style>  
.list li:nth-of-type(odd){ margin-left: 20px;}奇数行   
.list li:nth-of-type(even){margin-left: 10px;}偶数行   
<style>  




灰儿 楼主 2019-11-29 09:25:20
http://www.admin365.cn/thread-44894-1-1.html  CSS选取第几个标签元素:nth-child、first-child、last-child
您需要登录后才可以回帖 登录 | 注册
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。