css – 悬停不与n-child合作

他正在探索CSS 3的功能,我遇到了一些麻烦：

对于一个表我已经制作了这个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”分配给一行,则必须从类发送中获取背景颜色.

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

您正在将第n个子行的背景颜色应用于td. td上的背景颜色显示在tr的背景颜色之上.

将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;
}