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

Question

像这样的表格:

<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 有完全相同的结果。

Answer 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，但它不存在(据我所知)。