HTML 中 `table > tbody:nth-child(1)` 的消失

Question

这是一个简单的 HTML 表格，我想选择唯一的

<tbody>

元素。

    <table>
        <thead>
            <tr>
                <td>Team</td>
                <td>Points</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>15</td>
            </tr>
            <tr>
                <td>B</td>
                <td>21</td>
            </tr>
        </tbody>
    </table>

由于只有一个

<tbody>

，我以为可以用

:nth-child(1)

来获取，但是失败了。

> document.querySelectorAll('table > tbody').length /* It worked */
< 1
> document.querySelectorAll('table > tbody:nth-child(1)').length /* It failed */
< 0
> document.querySelectorAll('table > tbody:nth-child(2)').length /* It worked */
< 1

为什么

tbody:nth-child(1)

不存在，而

tbody:nth-child(2)

却存在？

Answer 1

为什么 tbody:nth-child(1) 不存在，而 tbody:nth-child(2) 却存在？

tbody

元素是 table 元素的

second

子元素，因此

:nth-child(1)

不起作用，因为它不是第一个子元素，但

:nth-child(2)

起作用，因为它是第二个子元素。

另一种选择是使用

tbody:nth-of-type(1)

，因为

tbody

元素是该类型元素中的第一个（也是唯一一个）。