CSS3 基于 table 行 class 的备用 table 背景颜色

Question

应该有一个很好的方法来根据 class 交替 table 行背景颜色。目前，我只是在做这样的事情：

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

不幸的是，我不确定如何包含 table 的所有 tr classes 并基于此进行 even/odd。

建议？

编辑：添加 snipped/edited 页面代码

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>

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

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

CSS3 基于 table 行 class 的备用 table 背景颜色

CSS3 Alternate table background color based on table row class

css

css-tables