css - CSS更改记录组的背景（非备用）

Question

我有一张表，我需要前 4 条记录具有相同的背景颜色。

示例：前 4 条记录的背景均为黄色。

我需要接下来的 4 条记录都具有蓝色背景。因此，以下 4 个将是黄色的。

我不知道如何使用 对tr:nth-of-type多条记录进行分组。

我可以获得备用，但是我无法获得多条记录的背景颜色。

建议？

Answer 1

http://cssdeck.com/labs/i8zohrrs

tr:nth-child(8n+1),
tr:nth-child(8n+2),
tr:nth-child(8n+3),
tr:nth-child(8n+4) {
  background: yellow;
}

如果您以这种方式为行着色，因为它们具有某种关系，最好将它们包装在 tbody 标记中：

http://codepen.io/cimmanon/pen/KqoCs

tbody:nth-child(odd) {
  background: #CCC;
}

<table>
    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="3"></td>
            <td>a</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>b</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>c</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 2

这是一个将背景颜色添加到第二个的示例

标签。HTML:====>>>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

下面的代码是css：====>>>>

p:nth-of-type(2)
{
background:#ff0000;
}

Answer 3

与大多数事情一样，有几种方法可以解决它，

工作示例

CSS方法：

tr{
    background:green; /* all */
}
.orange{    
    background:orange; /* add class .orange */
}
tr:nth-child(3n+3){
    background: yellow; /* every 3rd child */
}

tr:nth-child(2){
    background: blue; /* 2nd child only*/
}

jQuery方法：

$('tr').slice(10, 13).css('background-color', 'red');  // select tr 11-13