为何表格行hover opacity样式不生效？CSS样式设置疑问

这是个很容易踩坑的CSS细节问题，咱们把两种写法的逻辑拆解开就一目了然了：

第一种写法失效的原因 #

你写的 tr td { opacity: 0.6; } 是直接给**每个表格单元格（td）**单独设置了透明度属性。当后续写 tr:hover { opacity: 1; } 时，你是在给父元素<tr>设置透明度，但<td>本身已经有了明确的opacity: 0.6样式——而且tr td这个选择器的优先级比单独的tr更高，父元素的透明度变化根本覆盖不了子元素自身的样式设置，所以hover时自然看不到效果。

第二种写法生效的逻辑 #

当你把opacity: 0.6直接应用在<tr>上时，这个透明度是作用于整个<tr>元素及其内部所有子元素的。此时<td>并没有自己的透明度设置，它们看起来半透明只是因为父元素<tr>的透明度“带动”了整个区域。所以当tr:hover { opacity: 1; }触发时，整个<tr>的透明度恢复正常，里面的<td>自然也跟着变回完全不透明，效果就正常生效了。

正确实现需求的写法 #

如果你的需求是除表头行外的所有行默认半透明，hover时全透明，推荐给非表头的行单独设置样式，比如：

/* 假设表头在<thead>，数据行在<tbody> */
tbody tr {
  opacity: 0.6;
}
tbody tr:hover {
  opacity: 1;
}

这样既精准命中目标行，又能保证hover效果正常触发~

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