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