首先看一下:nth-child和:even的说明
:nth-child(n) 第n个子节点,n从1开始
:even 页面范围内偶数的匹配元素
那么:nth-child(even) 的意思就是从第1开始的偶数元素,:even的意思是指从第0开始的偶数元素
在实际中一个常见的例子就是,当给表格的偶数行设置变色时,可以跳过表头行,而从第1行开始设置
让我们看一个实际的例子,把表格的偶数行的背景色设置为红色,看一下两种写法的不同结果
用:nth-child(even)
代码:$('table tr:nth-child(even)').css('background-color','red');
效果如下图:
1表头 | 表头 |
2 | |
3 | |
4 | |
5 |
用:even
代码:$('table tr:even').css('background-color','red');
效果如下图:
0表头 | 表头 |
1 | |
2 | |
3 | |
4 |