CSS3基于表格行类的备用表格背景颜色答案

【问题标题】：CSS3 Alternate table background color based on table row classCSS3基于表格行类的备用表格背景颜色
【发布时间】：2019-01-29 12:45:21
【问题描述】：

应该有一种基于类交替表格行背景颜色的好方法。目前，我只是在做这样的事情：

/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }

我认为有一种方法可以做类似的事情：

table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }

不幸的是，我不确定如何包含表的所有 tr 类并基于此进行偶数/奇数。

建议？

编辑：添加剪切/编辑的页面代码

table#table_organization tr.unsure,
tr.dept,
tr.org {
  background-color: honeydew;
}

table#table_organization tr.board,
tr.prog,
tr.ssa {
  background-color: white;
}

<section>
  <h1> Organization </h1>
  <table id="table_organization" class="sortable">
    <tr>
      <th> Dept. </th>
    </tr>
    <tr class="unsure">
      <td> - </td>
    </tr>
    <tr class="board">
      <td> Board </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
  </table>
</section>

【问题讨论】：

发布您的完整代码，以便我们检查您的 css 出了什么问题，只有 css 我们无法理解发生了什么，尝试创建一个演示，您也可以检查这个css-tricks.com/almanac/selectors/n/nth-of-type 这可以帮助你。
添加了最小页面代码。 :nth-of-type 似乎只适用于元素而不是类选择器。理想情况下，我希望有一些东西可以为元素创建可用类的列表，然后对其执行 :nth-of-type。
我不这么认为，nth-of-type 将与类选择器一起使用。我添加了您可以检查的答案。

标签： css css-tables

【解决方案1】：

很遗憾，CSS 没有 :nth-of-class 伪选择器。只要行数非常有限，使用相邻的兄弟选择器+ 会有所帮助（仅针对.dept 显示）：

.dept {
  background: yellow;
}

.dept+.dept {
  background-color: orange;
}

.dept+.dept+.dept {
  background-color: red;
}

<table id="table_organization" class="sortable">
  <tr>
    <th> Dept. </th>
  </tr>
  <tr class="dept">
    <td> Department </td>
  </tr>
  <tr class="dept">
    <td> Department </td>
  </tr>
  <tr class="dept">
    <td> Department </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

table#table_organization tr.unsure,
tr.dept:nth-of-type(odd),
tr.org {
  background-color: honeydew;
}

tr.dept:nth-of-type(even){
    background-color: red;
}

table#table_organization tr.board,
tr.prog,
tr.ssa {
  background-color: white;
}

<section>
  <h1> Organization </h1>
  <table id="table_organization" class="sortable">
    <tr>
      <th> Dept. </th>
    </tr>
    <tr class="unsure">
      <td> - </td>
    </tr>
    <tr class="board">
      <td> Board </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="dept">
      <td> Department </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="prog">
      <td> Program </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="org">
      <td> Organization </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
    <tr class="ssa">
      <td> SSA </td>
    </tr>
  </table>
</section>

【讨论】：