样式化多个备用表行

Question

我目前有一个“垂直表”（即标题在右边）。 html看起来像这样：

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

我试图在每个1内为每个“数据块”设置样式 - 带有2的三行，带有tbody的三行，等等或奇数。

我的第一个想法是使用tr:nth-child(odd);但是，这样做：

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
tr:nth-child(odd) {
  background-color: steelblue;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

哪个不起作用。

然后我尝试按tbody（tbody:nth-child(odd)）设置样式，但这显然不起作用。

我试过的另一个是:nth-child(-n+3)创建了这个结果：

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
tr:nth-child(-n+3) {
  background-color: steelblue;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

它很接近，但只获得第一个“数据块”（就像我所说的那样）。

我正在寻找一种纯css方式来设置多个备用表行的样式，这看起来像这样：

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
.style-me {
  background-color: steelblue;
}
tbody:before{
  content: 'new tbody';
}

<table>
  <tbody>
    <tr class="style-me"><th>1</th><td>1</td></tr> <!-- style this -->
    <tr class="style-me"><th>1</th><td>1</td></tr> <!-- style this -->
    <tr class="style-me"><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr class="style-me"><th>3</th><td>3</td></tr> <!-- style this -->
    <tr class="style-me"><th>3</th><td>3</td></tr> <!-- style this -->
    <tr class="style-me"><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr class="style-me"><th>4</th><td>4</td></tr> <!-- style this -->
    <tr class="style-me"><th>4</th><td>4</td></tr> <!-- style this -->
    <tr class="style-me"><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

但是，它不使用类而是使用css选择器/伪类/元素（可能是:nth-of-type？）来设置奇数行的分组，因为行的分组数量是未知的（它是一个动态表）

答案中的comment最能说明我要找的内容。

Answer 1

https://jsfiddle.net/Lg9cwwxn/2/

HTML

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
tbody:before {
  content: 'new tbody';
}

tr:nth-child(even):nth-child(3n-1) {
  background-color: steelblue;
}

tr:nth-child(odd) {
  background: steelblue;
}

tr:nth-child(odd):nth-child(6n-1) {
  background: white;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr>
    <tr><th>1</th><td>1</td></tr>
    <tr><th>1</th><td>1</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr>
    <tr><th>3</th><td>3</td></tr>
    <tr><th>3</th><td>3</td></tr>
    <tr><th>4</th><td>4</td></tr>
    <tr><th>4</th><td>4</td></tr>
    <tr><th>4</th><td>4</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>6</th><td>6</td></tr>
    <tr><th>6</th><td>6</td></tr>
    <tr><th>6</th><td>6</td></tr>
  </tbody>
  <tbody>
    <tr><th>7</th><td>7</td></tr> 
    <tr><th>7</th><td>7</td></tr> 
    <tr><th>7</th><td>7</td></tr> 
    <tr><th>8</th><td>8</td></tr>
    <tr><th>8</th><td>8</td></tr>
    <tr><th>8</th><td>8</td></tr>
  </tbody>
</table>

代码背后的逻辑：

1. 获取奇数并更改背景。 ：第n个孩子（奇数）
2. 得到一个3n-1的偶数孩子。表达式为3（n）-1 所以，3（1）-1 = 2,3（2）-1 = 5，依此类推。
3. 同样奇怪。 6n-1也是6（n）-1。

2号：将tr:nth-child(even):nth-child(2) and so on.

3号：将是tr:nth-child(even):nth-child(5) and so on.

抱歉，我不擅长解释。但我希望你能得到我的代码背后的逻辑。

更新。对不起，花了这么久。但这就是你想要的。希望能帮助到你。干杯！

Answer 2

检查以下代码段：

代码段：

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
table > tbody:first-child > tr:first-child, 
table > tbody:first-child > tr:nth-of-type(2), 
table > tbody:first-child > tr:nth-of-type(3) {
  background-color: steelblue;
}

table > tbody:first-child > tr:last-child, 
table > tbody:first-child > tr:nth-last-of-type(2), 
table > tbody:first-child > tr:nth-last-of-type(3) {
  background-color: steelblue;
}

table > tbody:nth-of-type(2) > tr:first-child, 
table > tbody:nth-of-type(2) > tr:nth-of-type(2), 
table > tbody:nth-of-type(2) > tr:nth-of-type(3) {
  background-color: steelblue;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>