html - 设置多个备用表格行的样式

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>

我正在尝试设置每个“数据 block ”的样式 - 带有 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>

它很接近，但只得到第一个“数据 block ”(我这样调用它)。

---

我正在寻找一种纯 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. 获取 Odd 并更改背景。 :nth-child(奇数)
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) 等等。

数字 3:将是 tr:nth-child(even):nth-child(5) 等等。

对不起，我不擅长解释。但我希望您了解我的代码背后的逻辑。

已更新。对不起，花了这么长时间。但这就是你想要的。希望能帮助到你。干杯!