:nth-child(odd)与:odd之间的比较

如图，这里有两个表格，需要实现的是为每个表格的奇数行添加样式alt，使其背景颜色变成灰色

使用:odd

$(document).ready(function() {
	$('tr:odd').addClass('alt');
});

结果如图，两个表格似乎合并为一个表格，而且此种形式计数是从0开始的。问题先暂放一下，看:nth-child()如何

使用nth-child(odd)

$(document).ready(function() {
	$('tr:nth-child(odd)').addClass('alt');
});

结果如图，两个表格依旧独立为两个表格，而且计数是从1开始的。

这里有两个不一样的地方，表格个数不一样以及计数基数不一样

1、表格个数不一样

要理解表格个数的区别，还得从它们的定义去理解（这里是参考jQuery基础教程（第四版））

:even(匹配结果集中的偶数元素)，回到案例，也就是说先把所有tr找出来，然后再到这个集合中查找偶数元素，这样自然就相当于把两个表格合并为一个表格了

:nth-child(even)（作为其父元素第偶数个子元素的元素），这里相当拗口。还是回到案例，就是说，先回到tr的各自父元素，此时的父元素自然table，而且有两个父元素，然后再从父元素table出发查找其包含的子元素tr中的第偶数个元素，这样就是依旧在两个表格中独立查找第偶数个子元素tr。

2、计数基数不一样

有的是从0开始、有的是从1开始，刚开始记忆，确实有点傻傻分不清。还好书上P22里面的一段话，帮助理解了其区别。javascript数组是采用从0开始的编号方式，而css选择符是正常的1开始计数。所以如果是采用的javascript数组的方式，那就从0开始计数，如：:eq(n)、:odd、:even等等；而如果是在用css选择符的方式，那就正常理解就可以了，如：:nth-child()

最后摘抄书本里面带有一句肯定语气的结论：:nth-child是jQuery中唯一从1开始计数的选择符