覆盖表行样式

Question

我的CSS文件中有：

.my_table tr {
    background:#BBBBBB;
}

和

.my_table tr .hover_style {
    background:#AAAAAA;
}

在我的HTML中，我的表格中包含hover_style的所有行：

<table class='my_table'>
    <tr class='hover_style'>
    ...
    </tr>
</table>

但所有行都有 #BBBBBB 颜色，但我预计会覆盖颜色 #AAAAAA ;

我哪里错了？

Answer 1

您的悬停样式中有空格。

.my_table tr.hover_style {
    background:#AAAAAA;
}

编辑：如果选择器后面有空格，它将设置定义了hover_style的所有后代的样式。在这种情况下，你所说的是“样式所有具有类hover_style的my_table表行后代”。你想要的是没有空格，它将设置类名为hover_style的.my_table下的所有td行。