交替排列的第n个孩子和第n种颜色(Alternating row colours with nth

编程入门行业动态更新时间:2024-10-27 16:27:41

交替排列的第n个孩子和第n种颜色(Alternating row colours with nth-child and nth-of-type)

与重复的通知相反 ，这个问题不是重复的。声称的副本没有解决嵌套的问题，这在我的问题中已经清楚地解释了。

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

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？ 
Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question. 
I have a table where rows can have one of two classes: parent or child. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are trs. Example: 
Parent A
Child  1
Child  2
Parent B
Parent C
Child  1
 
I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color. 
Please see the included snippet for an example of what I'm trying to achieve. 
 
 
  
  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> 
  
 
 
I tried using CSS pseudo-selectors, but no luck. 
.parent:nth-child(odd) {
  background-color: green;
}
.parent:nth-child(even) {
  background-color: blue;
}
 
The nth-child selector ignores the class. I tried using nth-of-type but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children. 
Is what I'm trying to do possible in CSS? Or do I have to resort to 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> 
  
 
Is there any reason not to use multiple <tbody>s? Grouping rows can make it easy. 
 
 
  
  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>