5

他我在探索 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 个子选择器注释掉，它确实有效。同样在某些情况下，我必须给一些行不同的背景颜色。这是给用户的，所以他们可以很容易地看到一些东西的状态。因此，如果我将一个类分配给class="send"一行，它必须从该类发送的背景颜色中获取。

为什么这行不通？！还是我错过了什么！？

4

1 回答 1

16

您正在将background-color行nth-child应用于td. background-color上显示在的td上方。background-colortr

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

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

还

如果将选择器移到 CSS 中的选择hover器之后nth-child，则不需要!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;
}
于 2013-04-24T13:28:15.260 回答