html - 使用第 nth-child 来交替表中的颜色，除了选定的 TR 组

Question

我在 HTML 中有一个表格，我正在应用 CSS 类，使用 nth-child 为行提供交替颜色。但是，我希望有几组行是相同的颜色。如果我在这些行集周围放置一个 tbody，是否有一种方法可以在 CSS 中指定使该 tbody 中的行具有相同的颜色，然后继续交替使用颜色？另一种方法是手动设置行颜色，这似乎有点太过分了。

例如:

<table class="alternate-row-colors">
  <tr>
     <td>Blah blah blah</td>
  </tr>
  <tbody>
     <tr>
       <td>Same color as below</td>
     </tr>
     <tr>
       <td>Same color as above</td>
     </tr>
   </tbody>
   <tr>
      <td>Continue alternating colors of rows</td>
   </tr>
</table>

Answer 1

我能找到的唯一解决方案是将每个部分分成单独的 tbody 元素，并将备用类应用于具有所需样式的部分。

行数不会像行数那样完全交替，我假设事先不知道...但它很接近。

.alternate-row-colors tr:nth-child(odd) {
  background: #bada55;
}
.alternate-row-colors tr:nth-child(even) {
  background: gold;
}

<table>
  <TBODY class="alternate-row-colors">
    <TR>
      <TD>Monday</TD>
      <TD>09/11/2000</TD>
      <TD>Kelsey</TD>
    </TR>
    <TR>
      <TD>Tuesday</TD>
      <TD>09/12/2000</TD>
      <TD>Lindsey</TD>
    </TR>
    <TR>
      <TD>Wednesday</TD>
      <TD>09/13/2000</TD>
      <TD>Randy</TD>
    </TR>
    <TR>
      <TD>Thursday</TD>
      <TD>09/14/2000</TD>
      <TD>Susan</TD>
    </TR>
    <TR>
      <TD>Friday</TD>
      <TD>09/15/2000</TD>
      <TD>Randy</TD>
    </TR>
    <TR>
      <TD>Saturday</TD>
      <TD>09/16/2000</TD>
      <TD>Lindsey</TD>
    </TR>
    <TR>
      <TD>Sunday</TD>
      <TD>09/17/2000</TD>
      <TD>Susan</TD>
    </TR>
  </TBODY>
  <TBODY>
    <TR>
      <TD>Monday</TD>
      <TD>09/18/2000</TD>
      <TD>Melody</TD>
    </TR>
    <TR>
      <TD>Tuesday</TD>
      <TD>09/19/2000</TD>
      <TD>Christiane</TD>
    </TR>
    <TR>
      <TD>Wednesday</TD>
      <TD>09/20/2000</TD>
      <TD>Symphony</TD>
    </TR>
    <TR>
      <TD>Thursday</TD>
      <TD>09/21/2000</TD>
      <TD>Starflower</TD>
    </TR>
    <TR>
      <TD>Friday</TD>
      <TD>09/22/2000</TD>
      <TD>Miko</TD>
    </TR>
    <TR>
      <TD>Saturday</TD>
      <TD>09/23/2000</TD>
      <TD>Cleo</TD>
    </TR>
    <TR>
      <TD>Sunday</TD>
      <TD>09/24/2000</TD>
      <TD>Alyx</TD>
    </TR>
  </TBODY>
  <TBODY class="alternate-row-colors">
    <TR>
      <TD>Monday</TD>
      <TD>09/25/2000</TD>
      <TD>Dancing Star</TD>
    </TR>
    <TR>
      <TD>Tuesday</TD>
      <TD>09/26/2000</TD>
      <TD>Dawn</TD>
    </TR>
    <TR>
      <TD>Wednesday</TD>
      <TD>09/27/2000</TD>
      <TD>Josh</TD>
    </TR>
    <TR>
      <TD>Thursday</TD>
      <TD>09/28/2000</TD>
      <TD>Ryan</TD>
    </TR>
    <TR>
      <TD>Friday</TD>
      <TD>09/29/2000</TD>
      <TD>Mary Kay</TD>
    </TR>
    <TR>
      <TD>Saturday</TD>
      <TD>09/30/2000</TD>
      <TD>Hallie</TD>
    </TR>
    <TR>
      <TD>Sunday</TD>
      <TD>10/01/2000</TD>
      <TD>Paul</TD>
    </TR>
  </TBODY>
</table>