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

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