html - 如何使用 :not 选择器和 :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. ~选择器- http://jsfiddle.net/5sKqX/

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

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

2.使用-http <thead>: //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.使用-http :not(:first-child): //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;
}