IE10 与 nth-child 和 nth-of-type 的行为不一致答案

【问题标题】：Inconsistent behavior of IE10 with nth-child and nth-of-typeIE10 与 nth-child 和 nth-of-type 的行为不一致
【发布时间】：2013-11-20 11:13:52
【问题描述】：

有这样一张桌子：

<table>
    <thead>
        <tr><td>1</td></tr>
    </thead>
    <tbody>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
    </tbody>
</table>

我尝试从所有行（包括 THEAD 中的行）中获取第 3 行，如下所示：

table.querySelector("tr:nth-of-type(3)");

我得到第 4 行。此外，使用 5 作为 :nth-of-type 的值返回 null。使用 4 返回最后（第五）行。碰巧缺少 TBODY 的第一行（值 1 返回 THEAD 中的行）。

这是一个 IE 错误还是我做错了什么？顺便说一句，我的环境是 WinJS，它使用 IE 10 作为它的 JavaScript 引擎。

我仔细检查了 :nth-of-type 是基于 1，而不是基于 0。我与 :nth-child 的结果完全相同。

【问题讨论】：

This example 在 IE 10 中工作正常并返回正确的行。您在 IE 和您的环境中使用此代码是否有同样的体验？
这似乎不是 IE10 实现的问题，除非 Firefox 也存在错误 - 请参阅 this JSFiddle，它在 Firefox 和 IE10 中都返回 <td>4</td>。
感谢 JSFiddle。在 IE10 上（在我的环境之外），它确实是错误的。 :nth-child(1) 返回 1。:nth-child(2) 返回 3。所以它并没有像人们想象的那样链接到 tbody。

标签： javascript internet-explorer-10 html-table css-selectors

【解决方案1】：

我明白了。

:nth-child 和 :nth-of-type 返回其父元素的第 n 个元素。

但 TR 有不同的父级（THEAD 和 TBODY），即使它们是同一张表的一部分。这就是搞砸结果的原因。

如果你这样做：

table.querySelectorAll("tr:nth-of-type(1)");

数组包含两个元素。 THEAD 和 TBODY 的第一个 TR。

调用 nth-of-type(2) 返回 TR 编号 3，因为...它确实是表中唯一的 TR，它是其父级 TBODY 的第二个子级。

我需要的是一个选择器，它在找到的所有元素中获取元素 n°X，但它不存在（据我所知）。

【讨论】：