CSS 使用相同的背景颜色将每 3 行组合在一起并调整最后或最后两行

Question

我能够将每 3 行分组为相同的颜色，但我希望最后一行与最后一组分组。这可能使用 CSS 吗？

如果只剩下一行，则将其与最后一组分组。所以最后一组是一组 4 行。

如果末尾还剩两行，则将其打散并在列表末尾分成 2 组，每组 4 个。

http://jsfiddle.net/gnurw6ed/

tr:nth-child(6n), tr:nth-child(6n-1), tr:nth-child(6n-2) {
background: white;
}
tr:nth-child(6n-3), tr:nth-child(6n-4), tr:nth-child(6n-5) {
    background: grey;
}

Answer 1

不，在 CSS 中，您无法检查 table 中剩余的行数。

但是，您可以简单地使用 JS 来完成。 Here是一个演示。

var rowCount = $('#table tr').length;
if (rowCount % 3 == 1) {
    $('#table tr:last').css("background", "grey");  
}
else if (rowCount % 3 == 2) {
    $('#table tr:nth-last-child(5)').css("background", "white");   
    $('#table tr:nth-last-child(2)').css("background", "grey");   	 	 $('#table tr:last').css("background", "grey");  
}

tr:nth-child(6n-3), tr:nth-child(6n-4), tr:nth-child(6n-5) {
    background: grey;
}

<table id="table">
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
    </tr>
    <tr>
        <td>11</td>
    </tr>
</table>