css - 每两个表行的第 n 个孩子

Question

我需要将表格的每两行设为灰色，如果可能的话，我更愿意使用 nth-child。

我已经搞砸了Chris Coyier 的第 n 个孩子测试器，但仍然无法得到它。

我需要以下公式：

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

等等。我不想在 html 中放置一个类，因为我确信这将是一些人的建议。如果有办法用 nth-child 解决这个问题，那就是我正在寻找的。

Answer 1

意识到你正在做 4 组，然后你可以看到你可以让每 4 个元素和每 4 个元素减一为白色，然后每 4 个元素减 2，或每 4 个元素减 3 为灰色。

因此，您将使用4nand 4n-1，然后使用4n-2and 4n-3：

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

该代码对您的情况并不精确，我为jsFiddle proof-of-concept编写了它。

NB 免责声明：请记住，nth-child这在 IE8 中不起作用。典型的问题，当然。

Answer 2

这是我用来右对齐每个表的第一列的方法。

table td:nth-child(2n-1) {
    align: right;
    text-align: right;
}

Answer 3

@Eric 的回答是完全正确的——但是如果你想轻松地将其扩展到 3、4、5 等组，并且你正在使用 Sass，那么这里是代码（如果你想要更多组，只需增加$largestGroupSize）：

.table-with-grouped-rows {

    // generate styles for .groups-of-2, .groups-of-3, etc.
    $largestGroupSize: 6;
    @for $groupNumPerColor from 2 through $largestGroupSize{

        $totalGroupNum: $groupNumPerColor * 2;

        &.groups-of-#{$groupNumPerColor} {

            $start: $totalGroupNum - 1;
            $end: $groupNumPerColor;
            @for $primaryBgIndex from $start through $end {
                $nthString: #{$totalGroupNum}n - #{$primaryBgIndex};

                > tbody > tr:nth-of-type(#{$nthString}) > td {
                    background-color: $white;
                }
            }

            $start: $groupNumPerColor - 1;
            $end: 0;
            @for $alternateBgIndex from $start through $end {
                $nthString: #{$totalGroupNum}n - #{$alternateBgIndex};
                > tbody > tr:nth-of-type(#{$nthString}) > td {
                    background-color: $light-gray;
                }
            }
        }
    }
}

然后在您的标记中，在<table>元素上，您只需添加类table-with-grouped-rows和groups-of-{n}. 例如，如果您想要一个包含 3 个组的表格，您可以编写：

<table class="table-with-grouped-rows groups-of-3">

繁荣。