第n个子项和第n类型的行颜色交替

Alternating row colours with nth-child and nth-of-type

本文关键字：颜色 类型      更新时间：2024-04-17

与重复通知相反，此问题不重复。所谓的重复并没有解决嵌套的问题，我在问题中已经清楚地解释了这一点。

我有一个表，其中的行可以有两个类之一：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？

是否有理由不使用多个<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>

为什么不做一些javascript呢？

var RowNumber = 0,
for(i = Rownumber + 1; i<=x*;i++) {
If (RowNumber % === 0) {
 this.setAttribute('class', 'even');
} else {
 this.setAttribute('class', 'odd');
}
});

创建偶数类和奇数类，并给每个tr一个id

*注意：将x设置为等于表中的行数。

或者做一个switch语句，我更喜欢一个好的ol'if语句，但switch也可以工作：）

检查此解决方案：http://fiddle.jshell.net/manzapanza/6vjLm0td/

table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #eee;
  padding: 10px;
}
.parentOdd {
  background-color: #eb94fa;
}
.parentOdd.child:nth-child(odd) {
  background-color: #F2C9F9;
}
.parentOdd.child:nth-child(even) {
  background-color: #F9E1DC;
}
.parentEven {
  background-color: #c294fa;
}
.parentEven.child:nth-child(odd) {
  background-color: #E1CCFC;
}
.parentEven.child:nth-child(even) {
  background-color: #EEE5FA;
}
<table>
  <tbody>
    <tr class="parentOdd">
      <td>Parent A</td>
    </tr>
    <tr class="parentOdd child">
      <td>A1</td>
    </tr>
    <tr class="parentOdd child">
      <td>A2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent B</td>
    </tr>
    <tr class="parentOdd">
      <td>Parent C</td>
    </tr>
    <tr class="parentOdd child">
      <td>C1</td>
    </tr>
    <tr class="parentOdd child">
      <td>C2</td>
    </tr>
    <tr class="parentEven">
      <td>Parent D</td>
    </tr>
    <tr class="parentEven child">
      <td>D1</td>
    </tr>
    <tr class="parentEven child">
      <td>D2</td>
    </tr>
  </tbody>
</table>

相关文章：