如何实现仅添加指定CSS类的表格拥有td hover高亮效果

问题原因 #

原生CSS不支持直接嵌套选择器的写法，你写的嵌套规则是Sass/Less等CSS预处理器的语法，浏览器无法直接解析，所以不会生效。

正确实现方式 #

使用后代选择器编写规则即可，仅匹配带有.hovereffect类的表格内部的td元素的hover状态，这是兼容性最好的写法：

table{
    border: 3px solid black;
}
/* 仅选择类为hovereffect的表格下的td的hover状态 */
.hovereffect td:hover {
    background-color: yellow;
}

如果你想使用原生CSS的嵌套语法（主流新版浏览器已支持，老版本浏览器不兼容），需要在嵌套的子选择器前加&标识父级选择器：

table{
    border: 3px solid black;
}

.hovereffect {
    & td:hover {background-color: yellow}
}

使用方法 #

给需要开启hover高亮效果的表格添加hovereffect类即可，示例HTML：

<!-- 会有hover高亮效果的表格 -->
<table class="hovereffect">
  <tr>
    <td>测试单元格1</td>
    <td>测试单元格2</td>
  </tr>
</table>

<!-- 不会有hover高亮效果的普通表格 -->
<table>
  <tr>
    <td>测试单元格1</td>
    <td>测试单元格2</td>
  </tr>
</table>

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