首先看一下: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 |
CSS选择器:nth-child与:even的区别
本文详细解释了CSS选择器:nth-child(even)与:even的区别,并通过一个具体的表格行背景色设置示例展示了这两种选择器的实际应用效果。
1598

被折叠的 条评论
为什么被折叠?



