TBODY：第n个孩子选择似乎包括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]乔希拥有更好的回答，全部表的子女数但是将不会选择thead。