第n个孩子每两个表行第n个孩子每两个表行(nth-child for every two table

我需要让我的表灰色的每两行，我宁愿尽可能使用第n个孩子。

我搞砸周围的克里斯Coyier的第n个孩子测试仪 ，但仍无法得到它。

我需要下面的公式：

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

等等。 我不想把一个类的HTML，因为我敢肯定，将是一些建议。 如果有一种方法与第n个孩子拉这一关，这就是我要找的。

Answer 1:

要知道，你正在做的4组，那么你就可以看到你可以每4个元素，每4个元素减去一个是白色的，那么每4个元素减去两，或每4个元素减去3是灰色。

所以，你会使用4n和4n-1然后4n-2和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验证的概念 。

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

Answer 2:

下面是我用什么右对齐每个表的第一列。

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

Answer 3:

@ Eric的回答是完全正确的-但是如果你想轻松地这个范围扩大到3组，4，5，等，并且正在使用无礼的话，这里的代码（如果你想要更多的群体，只是增加$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">

繁荣。

文章来源: nth-child for every two table rows