具有nth-child和nth-of-type的交替行颜色

Question

与重复通知相反,这个问题不重复.声称的副本没有涉及嵌套的情况,我已经在我的问题中清楚地解释了这一点.

我有一个表,其中行可以有两个类之一:parent或child.有些父母有很多孩子,有些则没有孩子.表的HTML结构是平的,不能表示行之间的层次关系; 父母和孩子都是tr.例:

Parent A
Child  1
Child  2
Parent B
Parent C
Child  1

我想对行进行条带化以使奇数和偶数父行具有颜色,并且它们各自的子项将具有较浅的父颜色阴影.

请参阅附带的代码片段,了解我正在努力实现的目标.

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #eee;
  padding: 10px;
}

.parentOdd {
  background-color: #eb94fa;
}

.parentEven {
  background-color: #c294fa;
}

.oddChild {
  background-color: #f2c4fa;
}

.evenChild {
  background-color: #d8bbfd;
}

<table>
  <tbody>
    <tr class="parentOdd">
      <td>Parent A</td>
    </tr>
    <tr class="oddChild">
      <td>A1</td>
    </tr>
    <tr class="oddChild">
      <td>A2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent B</td>
    </tr>
    <tr class="parentOdd">
      <td>Parent C</td>
    </tr>
    <tr class="oddChild">
      <td>C1</td>
    </tr>
    <tr class="oddChild">
      <td>C2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent D</td>
    </tr>
    <tr class="evenChild">
      <td>D1</td>
    </tr>
    <tr class="evenChild">
      <td>D2</td>
    </tr>
  </tbody>
</table>

我尝试使用CSS伪选择器,但没有运气.

.parent:nth-child(odd) {
  background-color: green;
}
.parent:nth-child(even) {
  background-color: blue;
}

该nth-child选择忽略类.我尝试使用nth-of-type但是也忽略了这个课程.此外,两个伪选择器都无法处理孩子的情况.

我想在CSS中做什么？或者我是否必须使用JavaScript？

Answer 1

有没有理由不使用多个<tbody>？
对行进行分组可以使其变得简单.

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #eee;
  padding: 10px;
}

tbody:nth-child(odd) > tr { /* odd child */
  background-color: #f2c4fa;
}

tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */
  background-color: #eb94fa;
}

tbody:nth-child(even) > tr { /* even child */
  background-color: #d8bbfd;
}

tbody:nth-child(even) > tr:nth-child(1) { /* even parent */
  background-color: #c294fa;
}

<table>
  <tbody>
    <tr>
      <td>Parent A</td>
    </tr>
    <tr>
      <td>A1</td>
    </tr>
    <tr>
      <td>A2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Parent B</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Parent C</td>
    </tr>
    <tr>
      <td>C1</td>
    </tr>
    <tr>
      <td>C2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Parent D</td>
    </tr>
    <tr>
      <td>D1</td>
    </tr>
    <tr>
      <td>D2</td>
    </tr>
  </tbody>
</table>