如何使用 CSS 突出显示表格中 10 行的交替组？答案

【问题标题】：How can I use CSS to highlight alternating groups of 10 rows in my table?如何使用 CSS 突出显示表格中 10 行的交替组？
【发布时间】：2016-11-08 23:48:54
【问题描述】：

我网站中的数据按逻辑分组为 10 行批次，因此我想通过设置背景颜色来突出显示交替的 10 行批次。

通常，这样的高亮显示会像这样每隔一行交替显示：

table tr:nth-child(2n+2) { background: #c0c0c0; }

如何使用 nth-child 突出显示 10 行的交替组？

我能做的最好的事情就是在这个小提琴中每隔 10 行突出显示一次

https://jsfiddle.net/ppa910o8/

【问题讨论】：

如果按逻辑分组，应该在标记中分组
是的，但一目了然并不清楚 1 组 10 组在哪里结束，下一组从哪里开始。更改每个交替组的背景颜色将更容易识别每个相应的组
如果表格是通过程序生成的，那么对每个表格行应用不同的类会很容易。

标签： css css-selectors

【解决方案1】：

将:nth-child() 与:nth-child(n+10) 格式一起使用，您可以在其中列出10 个组。例如，:nth-child(n+10)、:nth-child(n+20)、:nth-child(n+30)... 规则的顺序与此方法有关。

table tr {
  background: red;
}
table tr:nth-child(n+10) {
  background: blue;
}
table tr:nth-child(n+20) {
  background: green;
}

<table>
  <tr>
    <td>1</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>2</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>3</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>4</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>5</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>6</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>7</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>8</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>9</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>10</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>11</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>12</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>13</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>14</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>15</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>16</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>17</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>18</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>19</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>20</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>21</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>22</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>23</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>24</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>25</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>26</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>27</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>28</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>29</td>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>30</td>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

【讨论】：

嗯，这比我预期的要复杂得多，因为我永远不知道表中有多少组，因为数据总是被添加到

【解决方案2】：

我不确定这是否正是您想要的，但它应该可以解决问题：

table tr:nth-child(n+10) {
  background: #c0c0c0;
}
table tr:nth-child(n+20) {
  background: #fff;
}
table tr:nth-child(n+30) {
  background: #c0c0c0;
}

【讨论】：

【解决方案3】：

您可以使用 nth-child 执行以下操作：

table tr:nth-child(20n-10),
table tr:nth-child(20n-11),
table tr:nth-child(20n-12),
table tr:nth-child(20n-13),
table tr:nth-child(20n-14),
table tr:nth-child(20n-15),
table tr:nth-child(20n-16),
table tr:nth-child(20n-17),
table tr:nth-child(20n-18),
table tr:nth-child(20n-19){
  background: #c0c0c0;
}

【讨论】：

【解决方案4】：

一般原则是将#n 部分的分组大小加倍，然后使用以下方法定位n 项目：

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

【讨论】：