应用 tr:hover 但仅适用于某个 class

Question

我有一些 CSS 可以在悬停时为 table 上的一行着色。

tr:hover {
  background: gray !important;
}

但是，它还会突出显示 table 上的过滤行。所以我做了 Inspect 并发现它有 <tr class="MuiTableRow-root MuiTableRow-hover"...etc

所以，我的问题是，如何修改上面的代码，使其仅适用于上面显示的 class？

编辑：第一次尝试应用 class。

.MuiTableRow-root MuiTableRow-hover {
  tr:hover {
    background: gray !important;
  }
}

Answer 1

正如评论中所指出的，请查看 class selectors 的文档。

您无法将 class 与元素的标签结合起来。
在这种情况下，它们是这样写在一起的：

tr.MuiTableRow-hover:hover {
  background: gray !important;
}

• 当HTML标签有class时：写标签和.然后class
• 当HTML标签内有某个元素带有class时，用 space
将它们分开
• 帮自己一个忙，搜索 CSS 教程来教您基础知识。有空的话学起来也不是很难

有点高级的是信任 CSS Specificity 而忽略 !important。如果您的选择器更具体（或者您的 CSS 是稍后加载的），即使不使用 !important.

，您的样式也会被应用

tr.MuiTableRow-hover:hover {
  background: gray;
}

Answer 2

css 规则应如下所示：

tr.MuiTableRow-hover:hover {
   background: gray !important;
}

请注意，使用 !important 并不是最佳实践，因此如果可能的话尽量避免使用它会更好