覆盖表格特定行的悬停样式答案

【问题标题】：Override hover style for specific rows of table覆盖表格特定行的悬停样式
【发布时间】：2021-09-02 07:46:09
【问题描述】：

我们有一个这样定义的通用 css 样式：

.table-container table tr:hover td {
  background-color: #eaeaea;
}

这用于跨应用程序的所有表。但是，我必须为特定行上的特定表覆盖它。我用这个定义在每个<tr class=‘edited’> 附加了新的css样式：

.edited {
  background-color: #f8cbad;
}

但是，当悬停在行上时，它使用通用悬停样式，我无法覆盖它。

您能否建议如何覆盖它，以便即使在悬停该行时我也能看到与编辑样式相同的背景颜色？

我尝试了跟随和调整，但没有成功。

.table-container table tr:hover .edited td {
  background-color: #eaeaea;
}

【问题讨论】：

尝试背景色：#f8cbad !important; ?
继续阅读 specificity 的 CSS 声明。
如果你想覆盖 CSS 规则，你必须考虑 CSS 规则本身的最高顺序。更具体的 CSS 规则总是会覆盖更简单的规则。示例：.edited 将被 .wrapper div .edited 覆盖，依此类推。一个简单的快捷方式是将!important 添加到规则的末尾。
为“已编辑”类添加 !important 不起作用。悬停时，仍然应用通用悬停样式。

【解决方案1】：

好的，经过一番尝试，我已经弄清楚了。回答帮助他人：为特定的样式类定义悬停就可以了：

.edited {
  background-color: #f8cbad;
}
.edited:hover {
  background-color: #f8cbad !important;
}

【讨论】：