CSS3 :nth-child() 选择器

复习巩固一下css3的nth-child()的用法。2015-10-20

1 W3C上的定义：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

2 用法实例

　　a 用在对元素的特定的子元素进行处理，

　　　　比如p:nth-child(3){color:red;} 意思是设置p元素的第3个子元素的字体为红色。

　　b 用于隔行变色

　　　　odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

　　

　　　　c 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值

　　

　　　　表示设置1,3,5...基数项颜色为红色

3 jQuery选择器中的:nth-child(even)和:even的区别

　　a 使用nth-child(even)

页面效果：从1开始的偶数行背景为红色

　　b 使用:even

页面效果：从0开始的偶数行背景为红色

 

转载于:https://www.cnblogs.com/hopexi/p/4894111.html