nth-child 选择器
最后更新于：2022-04-01 23:50:32
# 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代码：
~~~
~~~
> 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);
}
~~~
';