对于一个表我已经制作了这个CSS：

table.sortable tbody tr td {    border-bottom:1px solid;    height: 20px;}table.sortable tbody tr:hover {    background-color:#BCD2E5 !important;}table.sortable tbody tr:nth-child(odd) td {    background-color: #F3FAFF;}table.sortable tbody tr:nth-child(even) td {    background-color: #FFFFFF;}table.new{    background-color: rgb(255, 255, 187);}table.reaction{    background-color: rgb(255, 128, 64);}table.send{    background-color: rgba(154, 211, 109, 0.470588);}

问题是悬停不起作用,但如果我评论第n个子选择器,它确实有效.在某些情况下,我必须给一些行不同的背景颜色.这是为了用户,所以他们可以很容易地看到一些stuf的状态.因此,如果我将一个类如class =“send”分配给一行,则必须从类发送中获取背景颜色.

为什么这不起作用？！还是我错过了什么！？

将CSS更改为以下内容对我有用(从结束的nth-child选择器中删除td)：

table.sortable tbody tr:hover {    background-color:#BCD2E5 !important;}table.sortable tbody tr:nth-child(odd) {    background-color: #F3FAFF;}table.sortable tbody tr:nth-child(even) {    background-color: #FFFFFF;}

要么

将td添加到悬停选择器的末尾,如下所示：

table.sortable tbody tr:hover td {    background-color:#BCD2E5 !important;}

请参阅此codepen：http://codepen.io/keithwyland/pen/woLmh

也

如果你在CSS中的第n个孩子选择器之后移动悬停选择器,那么你不应该需要！important.所以,像这样：

table.sortable tbody tr:nth-child(odd) {    background-color: #F3FAFF;}table.sortable tbody tr:nth-child(even) {    background-color: #FFFFFF;}table.sortable tbody tr:hover {    background-color:#BCD2E5;}