css - 在表格行上有多个类

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”类。

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

Although, if you want to optimise, I'd probably recommend using the :first-child selector, this will highlight only the first row, without you needed to give it a separate class