css取偶数节点_css3nth-child选择器
css3 nth-child选择器
css3的nth-child选择器,乍看起来很简单,其实不是那么容易。
简单⽤法
p:nth-child(n) // 选择属于其⽗元素的第n个⼦元素的每个
元素
p:nth-child(2n) // 选择属于其⽗元素的⼦元素的每个偶数
元素
p:nth-child(2n + 1) // 选择属于其⽗元素的⼦元素的每个奇数
元素
注意事项
⼤概⼤家都知道上⾯的使⽤⽅法,但是有⼀点搞不清楚的话,使⽤起来就会很困惑。那就是n是什么?
n是从0开始的正整数,它代表着⼀个序列,0, 1, 2......这样的。
但是:nth-child(n+m)中的n+m是从1开始计算的,也就是说⼦元素的起始计算序号是1,不存在0这样⼦的元素。第⼀个元素就是1,不是0。这和程序⾥⾯的数组起始序号还有jQuery的选择器都是不⼀样的。
这样⼦就很好理解了。当我们要选择哪些元素的时候,只要把参数根据n的递增算出来的值对应到⼦元素在⽗元素⾥⾯的位置序列就好了
⽐如查第⼀个元素
:nth-child(1)
查序列⼤于等于10的元素jquery是什么选择器
:nth-child(n+10)
就这样⼦的
css3中还有⼀些其他的⼦元素选择器
⽐如
:first-child // 第⼀个元素
:last-child // 最后⼀个元素
:nth-last-child // 从最后⼀个⼦元素开始计数,n还是0开始,但是⼦元素的最后⼀个是1,倒过来了
互相辅助,还是很好⽤的
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论