html - 如何使用 :not selector with :nth-of-type

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

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

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

最佳答案

一些选项:

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;}

关于html - 如何使用 :not selector with :nth-of-type，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18298999/