Question

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

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

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

我想对行进行条带化处理，以便奇数和偶数父行具有颜色，并且它们各自的子颜色将具有较浅的父颜色。

请参阅附带的代码段，了解我尝试实现的目标。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我尝试使用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>？对行进行分组可以很容易。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

为什么不做一些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设置为等于表中的行数。

或做一个转换声明，我更喜欢一个好的ol＆＃39; if语句但Switch也能正常工作：）

Answer 3

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: