css - 用于选择交替元素组的 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;
}

十人一组（见小提琴）

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;
}