如何得到tr：nth-​​of-type（odd）for whole table not group（thead，tbody）？

Question

使用CSS我使用tr：nth-​​of-type（单数）为表格设置斑马条纹背景颜色。当然，这是父母的第一个孩子。有没有办法指定这是表的索引而不是父组？例如，结果如下：

tr:nth-of-type(odd) { background: blue; }
<table>
  <thead>
    <tr>Blue
    <tr>
    <tr>Blue
  </thead>
  <tbody>
    <tr>Blue
    <tr>
    <tr>Blue
  </tbody>
  <tfoot>
    <tr>Blue
  </tfoot>
</table>

我想要的是什么：

tr:nth-of-type(odd) { background: blue; }
<table>
  <thead>
    <tr>Blue
    <tr>
    <tr>Blue
  </thead>
  <tbody>
    <tr>
    <tr>Blue
    <tr>
  </tbody>
  <tfoot>
    <tr>Blue
  </tfoot>
</table>

后代图片：

Answer 1

我不知道如何使用100％CSS：/

BUT！当然，您不必使用thead/tfoot作为唯一必需的元素tbody;）

所以，这个JSFiddle有你想要的行颜色！

如果您愿意，可以对类中的虚假thead/tfoot行进行分类：）

<table>
  <tbody>
    <tr><th>faux thead blue</th></tr>
    <tr><th>faux thead not</th></tr>
    <tr><th>faux thead blue</th></tr>
    <tr><td>not</td></tr>
    <tr><td>Blue</td></tr>
    <tr><td>not</td></tr>
    <tr><th>faux tfoot blue</th></tr>
    <tr><th>faux tfoot not</th></tr>
    <tr><th>faux tfoot blue</th></tr>
  </tbody>
</table>

但是如果你必须使用thead / tfoot，你可以使用前面的 er ，* cough *以下* cough * jQuery / JS：

$("table").each(function(){ $(this).find("tr:even").css('background', '#e1e9f0'); });