如何使用：不是選擇器：類型爲n的

Question

關於樣式化表格。我希望每一個奇數行都有一個特定的背景，除了包含頭部的第一行。

我用下面的代碼不工作：

.new-items-table tr:nth-of-type(odd):not(.new-items-table tr):nth-of-type(1) 
{ 
background-color: red; 
} 

Answer 1

一些選項：

~ selector - http://jsfiddle.net/5sKqX/

.new-items-table tr ~ tr:nth-of-type(odd) {background-color:red;} 

它匹配tr S中的後其他tr S，所以它跳過頭行。

2.使用<thead> - http://jsfiddle.net/5sKqX/1/

<thead> 
    <tr><th>Header</th></tr>   
</thead> 
<tbody> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
</tbody> 

定製CSS：

.new-items-table tr:nth-of-type(even) {background-color:red;} 

3.使用:not(:first-child) - http://jsfiddle.net/5sKqX/2/

.new-items-table tr:nth-of-type(odd):not(:first-child) {background-color:red;} 

Answer 2

你可以這樣做：

.new-items-table tr:nth-child(2n + 3) { 
    background-color: red; 
} 

2n + 1是一回事odd。 2n + 3跳過前兩行。

演示：http://jsfiddle.net/YVTTA/

Answer 3

正如我在你的問題的評論中寫道的那樣，在<thead></thead>和<tbody></tbody>的表格正文中包裹了標題。然後，你可以簡單地使用以下規則：

.new-items-table tbody tr:nth-child(odd) 
{ 
    background-color: red; 
}