悬停不与n-child一起工作

Question

他正在探索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"一行,则必须从类发送中获取背景颜色.

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

Answer 1

您所申请的background-color用于nth-child行的td.该background-color对td正显示出上述background-color的tr.

将CSS更改为以下内容对我有用(td从最终nth-child选择器中删除):

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到hover选择器的末尾,如下所示:

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

看到这个codepen:http://codepen.io/keithwyland/pen/woLmh

也

如果移动hover选择后的nth-child在CSS选择器,那么你不应该需要的!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;
}