使用方法：不选择：nth-​​of-type

Question

我是关于造型的。我希望每个奇数行都有一个特定的背景，除了第一行包含标题。

我使用了以下不起作用的代码：

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

Answer 1

你可以这样做：

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

2n + 1与odd相同。 2n + 3跳过前两行。

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

Answer 2

一些选项：

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

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

它与其他tr之后的tr匹配，因此会跳过标题行。

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 3

正如我在您的问题的评论中所写，将您的标题包装在<thead></thead>和<tbody></tbody>中的表格正文中。然后你可以简单地使用以下规则：

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