子元素选择器 - :nth-child

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

:nth-child 允许我们指定选择第几个子元素 … 比如我们要选择页面上 ul 元素里的第一个 li 元素 ..

$( 'ul li:nth-child(1)' ).addClass( 'shadow' )

注意这个 :nth-child 是从 1 开始的 … 也就是第一个子元素的索引号是1,这跟我们前面介绍的 eq() 不太一样 … eq() 是从 0 开始的 ..

找到 ul 里面的第一个 li 子元素 … 再给它添加一个 shadow 类 …

在 :nth-child 里可以指定子元素所在位置的关键词 … 比如可以使用 odd 或者 even … 选择奇数位置的子元素 … 或者偶数位置的子元素 …

(#刷新)

$( 'ul li:nth-child(odd)' ).addClass( 'shadow' )

:nth-child 从1开始计算 … 所以,1,3,5,7, 这几个子元素被选择了 …

(#刷新)

最试一下 even …

$( 'ul li:nth-child(even)' ).addClass( 'shadow' )

这次选择的是ul元素里的 2,4,6,8,这几个位置上的 li 类型的子元素 …

:nth-child 还支持选择自己定义的成倍数位置上的子元素 …

比如我们要选择第 4 ,还有第 8 个 li 元素 …

$( 'ul li:nth-child(4n)' ).addClass( 'shadow' )

选择的子元素就是,从1数到 4 ,第4个子元素 … 然后在从第4个子元素往后再数4个数 …

如果你想反过来做的话,可以把 :nth-child … 换成 :nth-last-child …

$( 'ul li:nth-last-child(4n)' ).addClass( 'shadow' )

这样就会倒着往回数 …

子元素选择器 - :nth-child《 jQuery 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点