桌子悬停在桌子上,偶数/奇怪的样式通过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 */

否则,nth-child规则将始终优先于悬停,以及您添加背景颜色<tr>,而不是<td>之前的s.