应用 tr:hover 但仅限于某个类答案

【问题标题】：Applying tr:hover but only to a certain class应用 tr:hover 但仅限于某个类
【发布时间】：2021-09-23 13:52:11
【问题描述】：

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

tr:hover {
  background: gray !important;
}

但是，它也会突出显示表格上的过滤器行。所以我检查并发现它有<tr class="MuiTableRow-root MuiTableRow-hover"...etc

那么，我的问题是，如何修改上面的代码，使其仅适用于上面显示的那个类？

编辑：首次尝试应用类。

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

【问题讨论】：

这可以帮助你：developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
我假设您使用的是通过类名判断的 Material UI，但我不确定您所说的“过滤行”是什么意思 - 如果它是带有列名的第一行，应该不是也有这些课程吗？您可以将自定义类应用于要悬停的行吗？多一点上下文将帮助我们提供有用的答案。
我正在使用材料表。过滤器行使用不同的类。所以我只需要知道如何将上面的 tr:hover 应用到我提到的特定类。
@Lety 我曾尝试应用该类，但似乎有嵌套类。我已经编辑了原始帖子的结尾以显示我现在正在尝试的内容，但这不起作用。知道我的错误吗？
@Jon 看看正确的答案。 'tr.' 获取每个带有类名的 tr 元素，但如果选择器用空格分隔，它会搜索具有该类的选择器的子元素...

【解决方案1】：

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

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

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

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

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

【讨论】：

谢谢，效果很好。我之前确实看过一些教程，但让我失望的是所有的嵌套、多种应用样式，我应该把 tr 从 { } 中移出。
当然可以。试图同时结合每节课会让人感到困惑。 CSS 仅允许每个应用的样式有一个 {}。但是有一些工具允许嵌套语法并将其编写为 CSS（例如，SASS/SCSS 就是其中之一）。很高兴能提供帮助。

【解决方案2】：

css 规则应如下所示：

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

请注意，使用!important 并不是最佳做法，如果可能的话尽量避免使用会更好

【讨论】：