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。