html - tbody 元素打破第 n 个子选择器

Question

下面的代码应该按如下方式为行着色:

1. 黄色，
2. 红色，
3. 黄色，
4. 红色，
5. 黄色，
6. 红色……等等……

这在删除所有 <tbody> 时按预期工作和 </tbody> .

但是如果使用 <tbody>和 </tbody> ，就像在我的代码中一样，布局中断了。似乎它在每个 <tbody> 处再次以黄色开始 block 。

不幸的是，我需要原样的 HTML，带有 tbody ，所以我不能简单地删除它。

有人知道这个问题的 CSS 解决方法吗？

table {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-width: 1px;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-color: green;
}

td {
  padding: 10px;
}

.left {
  min-width: 160px;
  text-align: left;
  padding-left: 10px;
  -webkit-touch-callout: none;
}

.middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.right {
  min-width: 160px;
  text-align: right;
  padding-right: 10px;
}

.boldtitle {
  color: green;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

tr:nth-child(even) {
  background-color: red;
}

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

td {
  border-width: 1px;
  border-left-style: dotted;
  border-top-style: dotted;
  border-color: green;
}

@media only screen and (min-width:751px) {
  .table_details {
    display: none;
  }
}

<table>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM & </span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Citroen</a><span class="link_company">Citroen</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

</table>

Answer 1

检查是否this满足您的要求。

添加 CSS:

tbody:nth-child(even) tr:nth-child(odd) {
    background-color: red;
}

tbody:nth-child(even) tr:nth-child(even) {
    background-color: yellow;
}