如何修改tr:hover样式使其仅作用于指定class的表格行？

正确实现代码 #

原生CSS不支持嵌套规则，且命中同时携带多个类的元素需要将类选择器连写（中间无空格），正确代码如下：

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

原写法失效原因 #

• 你首次尝试的.MuiTableRow-root MuiTableRow-hover属于后代选择器，含义是选中.MuiTableRow-root元素内部的所有MuiTableRow-hover标签（不是类选择器），和需求完全不匹配。要选中同时携带两个类的元素，需写成.MuiTableRow-root.MuiTableRow-hover，多个类名之间不加空格。
• 把tr:hover写在类选择器的大括号内属于Sass/LESS等CSS预处理器的嵌套语法，原生CSS不支持该写法，需要把选择规则合并到同一层级。

如果你的项目配置了CSS预处理器、或者支持新版CSS嵌套规范，可以用以下嵌套写法：

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

内容的提问来源于stack exchange，提问作者Jon