在表行上有多个类

Question

全部， 我有一个HTML行的以下CSS：

.clickable_row:hover {
cursor: pointer;
}
.clickable_row:hover {
background-color: #FFFFCF;
}

然后我的html看起来像这样：

<tr class="clickable_row"><td>Text</td></tr>

但是，对于最高行，我还想添加一个突出显示的类。我试着做这样的事情：

<tr class="clickable_row highlighted"><td>Text</td></tr>

然后添加了以下CSS：

.clickable_row highlighed{
background-color: #BFDEFF;
}

这不突出显示行，有关如何使其工作的任何想法？

由于

Answer 1

使用

.clickable_row.highlighed{
    background-color: #BFDEFF;
}

或只是

.highlighed{
    background-color: #BFDEFF;
}

您的选择器会查找类clickable_row的元素的后代，这是highlighed标记

Answer 2

当你在类名中放置一个空格时，你正在创建一个全新的类，因此<tr class="clickable_row highlighted">创建了类“clickable_row”以及“突出显示”类。

如果您想突出显示它，请执行.highlighted { background-color: #BFDEFF; }

虽然，如果你想进行优化，我可能会建议使用:first-child选择器，这只会突出显示第一行，而不需要给它一个单独的类