jQuery 选择器(:nth-child(n))详解

注： nth-child(n)选择器与:eq(index)选择器的不同之处在于

eq(index)选择器只匹配一个元素，并且是所有匹配到的元素中的第index + 1个元素(索引index从0开始算起)；

nth-child(n)选择器则需要判断匹配到的元素是否是其父元素的第n个子元素或符合其他特定要求(序号n从1开始算起)，如果是就保留，否则将被舍弃。

语法

// 这里的selector表示具体的选择器
// 这里的n表示具体的序号或者符合要求的表达式
jQuery( "selector:nth-child(n)" )

参数

参数	描述
selector	一个有效的选择器。
n	指定的序号，从1开始计数。
参数n一般是一个自然数，表示作为父元素下的第n个子元素。例如：:nth-child(2)表示作为父元素的第2个子元素。

参数n也可以为特定的表达式(表达式中只能使用字母n表示自然数，大小写均可)。例如:

:nth-child(odd)表示匹配作为父元素的奇数(第1、3、5、7……个)子元素的元素；
:nth-child(even)表示匹配作为父元素的偶数(第2、4、6、8……个)子元素的元素；
:nth-child(3n)表示匹配作为父元素的第3n个子元素的元素(n表示包括0在内的自然数，下同)；
:nth-child(3n+1)表示匹配作为父元素的第3n+1个子元素的元素；
:nth-child(3n+2)表示匹配作为父元素的第3n+2个子元素的元素；

效果示例

jquery代码：

<script type="text/javascript" language="javascript">
		$(function(){
			$(".weui-media-box:nth-child(3n)").addClass("toBottomRight")
			$(".weui-media-box:nth-child(3n+1)").addClass("toBottomRight-deg");
			$(".weui-media-box:nth-child(3n+2)").addClass("toBottomRight-deg2");
		});
</script>

css代码----css3颜色渐变

.toBottomRight {
  background-image: -webkit-linear-gradient(tp bottom right, #4F83BD, #0D4E96);
  background-image: linear-gradient(to bottom right, #4F83BD, #0D4E96);
}

.toBottomRight-deg {
  background-image: -webkit-linear-gradient(tp bottom right, #E55C64, #D0333C);
  background-image: linear-gradient(to bottom right, #E55C64, #D0333C);
}

.toBottomRight-deg2 {
  background-image: -webkit-linear-gradient(tp bottom right, #1BB28F, #0D8A6C);
  background-image: linear-gradient(to bottom right, #1BB28F, #0D8A6C);
}