用于选择交替元素组的CSS选择器

Question

我有一个HTML表格，我想要突出显示3行的交替组，以便突出显示第0-3行，不突出显示第4-6行，突出显示第7-9行，等等。

到目前为止，我想到的最好的解决方案是：

tr:nth-child(6n + 1),
tr:nth-child(6n + 2),
tr:nth-child(6n + 3) {
   background-color:#eee;
}

是否可以将这些选择器压缩为一个选择器？

Answer 1

是的，这在单个选择器中是可能的(但它是最好的吗？)

如果以十个人为一组(正如你的评论所说的那样，这是你的最终目标)，那么与拥有十个单独的选择器相比，这可能不值得做，因为单独的选择器可能会更清晰。

三个()的组

tr:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6)) {
    background-color: #eee;
}

10个()的组

tr:not(:nth-child(20n+11)):not(:nth-child(20n+12)):not(:nth-child(20n+13)):not(:nth-child(20n+14)):not(:nth-child(20n+15)):not(:nth-child(20n+16)):not(:nth-child(20n+17)):not(:nth-child(20n+18)):not(:nth-child(20n+19)):not(:nth-child(20n+20)) {
    background-color: #eee;
}

这显然没有消除您希望避免的代码复制/粘贴问题，并且它是否符合“压缩”的条件是值得怀疑的。但是，它被简化为单个选择器。

Answer 2

如果您的行因为它们之间存在关系而以这种方式设置样式，那么使用<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 3

如果这纯粹是我不想手动输入所有这些选择器的情况，您可以使用CSS预处理器为您生成它们。

http://codepen.io/cimmanon/pen/Hrimz

萨斯：

@mixin fat-zebra($rows) {
  $collector: ();
  @for $r from 1 through $rows {
    $collector: append($collector, unquote("&:nth-child(#{$rows * 2}n+#{$r})"), comma);
  }
  #{$collector} {
    @content;
  }
}

td {
    @include fat-zebra(3) {
        background: yellow;
    }
}

输出：

td:nth-child(6n+1), td:nth-child(6n+2), td:nth-child(6n+3) {
  background: yellow;
}

更多行？

td {
    @include fat-zebra(10) {
        background: yellow;
    }
}

输出：

td:nth-child(20n+1), td:nth-child(20n+2), td:nth-child(20n+3), td:nth-child(20n+4), td:nth-child(20n+5), td:nth-child(20n+6), td:nth-child(20n+7), td:nth-child(20n+8), td:nth-child(20n+9), td:nth-child(20n+10) {
  background: yellow;
}