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

是的，它可能在一个选择器中（但最好是???）

如果以十人为一组（正如你的评论所说的那样是你的终极目标），可能不值得做，而不是拥有十个个人选择器，因为个别选择器可能会更多清楚。

三人小组（see fiddle）

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

十个小组（see fiddle）

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

这显然不会消除您希望避免的代码复制/粘贴问题，并且是否有资格作为＆＃34;简化而有疑问。＆＃34;但是，它被缩减为单个选择器。

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

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

3 个答案:

是的，它可能在一个选择器中（但最好是???）