将CSS应用到跟随一个对等元素（具有子标题的表）的偶数和奇数元素

Question

我试图在类表“ratingHead”的表行之后对表行的偶数和奇数元素着色。当“.ratingHead”达到时，颜色应该重新启动。

This image of the table may be more clear

下面是代码

<table class="evalTable"> 
    <thead> 
     <tr><th></th></tr> 
    </thead> 
    <tbody> 
     <tr class="tableHeadings"></tr> 
     <tr class="ratingHead"></tr> 
     <tr class="tableItems></tr> 
     <tr class="tableItems></tr> 
     <tr class="tableItems></tr> 
     <tr class="tableItems></tr> 
     <tr class="tableHeadings"></tr> <-- Keeps repeating based on how much information 
     <tr class="ratingHead"></tr> is dynamically generated from the database 
     <tr class="tableItems></tr> <-------------------------------------------------------> 
    </body> 
</table> 

这种结构是CSS我目前所面对的

tr.tableItems:nth-child(odd) { 
background-color: rgb(233, 231, 239); 
} 

tr.tableItems:nth-child(even) { 
background-color: #f9f9f9; 
} 

Answer 1

接近你正在尝试做的最好的方法是使用多个相邻的桌子，就像这样：

.eval h3, .eval td { 
 
    padding: 2px 10px; 
 
} 
 

 
.eval h3 { 
 
    color: rgb(233, 231, 239); 
 
    background: #5E4F67; 
 
    margin: 0; 
 
    font-weight: normal; 
 
} 
 
.eval table { 
 
    width: 100%; 
 
    margin: 0; 
 
    border-collapse: collapse; 
 
} 
 
tr.tableHeadings{ 
 
    background: #9084A0; 
 
} 
 

 
tr.tableItems:nth-child(odd) { 
 
background-color: rgb(233, 231, 239); 
 
} 
 

 
tr.tableItems:nth-child(even) { 
 
background-color: #f9f9f9; 
 
} 
 
tr.tableItems td:nth-child(even) { 
 
background-color: rgba(255,255,255,.5); 
 
}

<div class="eval"> 
 
    <h3>Chapter Heading</h3> 
 
    <table> 
 
     <thead> 
 
      <tr class="tableHeadings"><td colspan="3">Section Heading</td></tr> 
 
      <tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr> 
 
      <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr> 
 
      <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr> 
 
      <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr> 
 
      <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr> 
 
     </tbody> 
 
    </table> 
 
    <table> 
 
     <thead> 
 
      <tr class="tableHeadings"><td colspan="3">Section Heading</td></tr> 
 
      <tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr> 
 
      <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr> 
 
      <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr> 
 
      <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr> 
 
      <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Answer 2

我觉得你的语法应为：

tr:nth-child(even) {background: #f9f9f9;} 
tr:nth-child(odd) {background: rgb(233, 231, 239)} 

Answer 3

你不能做到这一点与当前的HTML结构你。

但你可以有分组多个tbody元素（这样的odd/even被重置为下一个新tbody的tr元素）

tr.tableItems:nth-child(odd) { 
 
    background-color: rgb(233, 231, 239); 
 
} 
 
tr.tableItems:nth-child(even) { 
 
    background-color: #f9f9f9; 
 
}

<table class="evalTable"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="tableHeadings"><td>heading #1</td></tr> 
 
    <tr class="ratingHead"><td>Rating</td></tr> 
 
    <tr class="tableItems"><td>row #1.1</td></tr> 
 
    <tr class="tableItems"><td>row #1.2</td></tr> 
 
    <tr class="tableItems"><td>row #1.3</td></tr> 
 
    <tr class="tableItems"><td>row #1.4</td></tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr class="tableHeadings"><td>heading #2</td></tr> 
 
    <tr class="ratingHead"><td>Rating</td></tr> 
 
    <tr class="tableItems"><td>row #2.1</td></tr> 
 
    </tbody> 
 
</table>