Question

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

我和Chris Coyier's nth-child tester混淆了但仍然无法得到它。

我需要以下公式：

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个是灰色。

因此，您使用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 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，请使用以下代码（如果您希望更多的组，只需增加{{ 1}}）：

$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。例如，如果您想要一个由3组组成的表，则可以这样写：

groups-of-{n}

景气。

每两个表行的nth-child

3 个答案: