tbody：nth-​​child选择器似乎包含thead元素

Question

table > tbody:nth-child(even) {
   background-color:red;
} 

<table>
<thead>
    <tr>
        <th>Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Body 1</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Body 2</td>
    </tr>
</tbody>

这是一个超级简单的jsfiddle：http://jsfiddle.net/d8c8f9ta/1/

预期结果：第二个tbody会有背景颜色：红色。

实际结果：第一个tbody有背景颜色：红色。

这看起来很奇怪。有什么想法吗？

Answer 1

:nth-child() pseudo class的工作原理 - 无论元素类型如何，它都会查看所有子元素。

由于您希望根据元素类型进行匹配，因此您正在寻找:nth-of-type()：

Updated Example

table > tbody:nth-of-type(even) {
   background-color:red;
}

Answer 2

计数从0开始，所以即使实际开始tbody[0] Josh有更好的答案， 所有 表中的孩子都计算在内 < em>但 thead将不会被选中。