tbody元素破坏了nth-child选择器

Question

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

1. 黄色,
2. 红色,
3. 黄色,
4. 红色,
5. 黄色,
6. 红......等......

删除全部<tbody>和\n时,这可以正常工作</tbody>.

但是如果使用<tbody>和</tbody>我的代码一样,布局会中断.似乎它在每个<tbody>街区再次以黄色开始.

不幸的是我需要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

检查这是否符合您的要求.

添加CSS:

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

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