为什么不是'；jquery和css在html表中是否一致？

我有以下jquery代码和：

$("table.altRow > tbody > tr:odd").addClass("oddColor");
$("table.altRow > tbody > tr:even").addClass("evenColor");

以及以下css：

.altRow tbody tr.evenColor { background-color : #e9e9e9; }
.altRow tbody tr.oddColor { background-color : #ffffff; }

而且它似乎导致了不一致的结果

一些表在第一个主体TR中的类上有“evenColor”，而另一些表在第一个主体TR中添加了“oddColor”

有什么原因导致这不一致吗？我希望白色（#ffffff）行始终是第一个正文行的背景色

如果我在一页上有两个表格。一个将evenColor放在一个表的第一行，另一个表将oddColor作为另一个表第一行的类

有什么建议吗？

这是因为jQuery适用于所有选定元素的列表，而不管它们在上下文中的位置如何

如果要使用jQuery，请改为使用，方法如下：

$(".altRow tbody tr:nth-child(odd)").addClass("oddColor");
$(".altRow tbody tr:nth-child(even)").addClass("evenColor");

性能提示

简化选择器，它们不需要那么长。如果将类

altRow

应用于

，则可以使用类似

的选择器。altRow tr:nth child（偶数）

仅使用CSS，不使用jQuery：

.altRow tr { background-color : #e9e9e9; } 
.altRow tr:nth-child(odd) { background-color : #ffffff; } 

在IE8-，

：n子项

仅通过使用或类似的库来支持

---

：odd

选择元素，而不是选择它们各自的父元素（如表中的第n个tr），而是选择整个DOM中的元素

如果您想要一个示例，请看以下内容：

如果您不明白，请阅读jQuery网站上的以下摘录：

In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

所以你应该做的是写下：

$("table.altRow > tbody > tr:nth-child(odd)").addClass("oddColor");
$("table.altRow > tbody > tr:nth-child(even)").addClass("evenColor");

如果我在示例中对其进行更新：

---

只是想知道，为什么你不使用CSS伪选择器，比如

。altRow tbody tr:nthchild（偶数）

，那么它是否仍然会产生同样的问题？你能显示相关的（最小/）HTML吗？如果可能的话，我们可以使用一个或类似的演示？也许jQuery将第一行视为“0”（偶数），而CSS将其视为“1”（奇数）？正如我在前面的评论中提到的，我是正确的，正如您在这个JSFIDLE中所看到的，这是因为IE8不支持这个是的，它在IE8的jQuery选择器中工作。如果将Selectivizr添加到页面中，它也可以在CSS选择器中工作。另一个性能提示是只使用一个而不是两个

：n子

选择器。因此，

tr{color:#e9e9e9}

和

tr:nth子（奇数）{color:#fff}

。注意：即使不将该类应用于TBODY，他们也可以使用该选择器。选择器中的空格表示祖先，而不是严格的父子关系。你说得对@ŠimeVidas！你只需要一个

：nth-child（）

，我更新了答案。但是不需要添加jQuery版本，只需使用Selectivizr，它就会自行处理。@leora的性能是相对的。在现代计算机上的Chrome浏览器中，这种差异几乎没有什么关系。web性能的问题在于这些小东西的数量和设备。当你开始在手机或IE8上的复杂页面上出现数千个“几乎不明显的性能损失”时，你会感到页面落后，可能节省的任何毫秒都会改善体验。我不会花时间优化旧网站上的选择器，但如果你现在正在编写它们，为什么要使用较慢（且编写时间较长）的版本？