html - tablerows 悬停在表格中，偶数/奇数通过 CSS 设置样式

Question

在表格行上设置偶数/奇数样式但表格行的悬停不起作用。
试穿:http://jsfiddle.net/w7brN/

CSS 样式:

#table_even tr:hover { background-color:#fffbae!important; } /* hovering */

#table_even tr:nth-child(odd) td { background-color:#fbfbfb } /*odd*/
#table_even tr:nth-child(even) td { background-color:#e8ecee } /* even*/

HTML 代码:

<table id="table_even" style="width: 100%">
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
    <tr>
        <td>##</td>
        <td>##</td>
    </tr>
</table>

怎么解决？

Answer 1

您需要重新排序 CSS 并添加 <td>像这样:

   #table_even tr:nth-child(odd) td {
    background-color: #fbfbfb
} /*odd*/
#table_even tr:nth-child(even) td {
    background-color: #e8ecee
} /* even*/
#table_even tr:hover td {
    background-color: #fffbae;
} /* hovering */

否则，第 n 个子规则将始终优先于悬停，以及您将背景颜色添加到 <tr> , 而不是 <td>之前。