css

关于 DESTOON B2B系统 的功能二次开发、前端模板制作HTML、JS、css特效教程、图片素材等这里应有尽有,如您需要,正好我们这里有。

CSS3选择器nth-child(n)实现隔几行选择元素

   css     2019-05-17 19:03     114     0    
核心提示:nth-child(n),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类型。序号写法:1. li:nth-child(3){background:orange;}倍数写法:1. li:nth-child(3n){background:orange;}倍数分组匹配:1. li:nth-child(3n+1){background:orange;}2. li:nth-child(3n+5){background:orange;}3. li:nth-child(5n-1){ba

nth-child(n),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类 型。


 序号写法: 1. li:nth-child(3){background:orange;} 


倍数写法: 1. li:nth-child(3n){background:orange;} 


倍数分组匹配: 1. li:nth-child(3n+1){background:orange;} 


2. li:nth-child(3n+5){background:orange;} 


3. li:nth-child(5n-1){background:orange;} 


隔三行设置颜色 1. $("tr:nth-child(3n)").css("background","#eee"); 


隔两行换一个颜色 1. $("tr:nth-child(2n)").css("background","#eee"); 


或者你是要每隔三行的第二行和第三行设置颜色? 

1. $("tr:nth-child(3n)").css("background","#eee");

 2. $("tr:nth-child(3n+2)").css("background","#ccc"); 

--结束END--

有问题投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

本文标题: CSS3选择器nth-child(n)实现隔几行选择元素

本文链接: https://www.dtmuban.com/course/656.html (转载时请保留)

阅读更多
 
本文标签: css 元素 隔行
0

圈友点评

文明上网理性发言,请遵守 新闻评论服务协议

福利

免费
福利

购买模板,免费送VIP

代授权

程序
授权

小黑

联系
客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

售前咨询 售后服务 DT授权代办

工作时间:

周一至周五: 09:00 - 18:00

反馈

用户
反馈