Question

应该有一个很好的方法可以根据类来替换表格行的背景色。目前，我正在做这样的事情：

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

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基于表格行类的备用表格背景色

2 个答案: