# 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); } ~~~