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的{{1}}上方。

将CSS更改为以下内容对我有用（从最终tr选择器中移除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

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

同时

如果您在CSS中的table.sortable tbody tr:hover td { background-color:#BCD2E5 !important; }选择器之后移动hover选择器，那么您不应该需要nth-child。所以，像这样：

!important

悬停不与n-child一起工作

1 个答案: