CSS背景色叠加问题求助：避免表格单元格与表头背景色混合

嘿，这个问题我之前做表格样式的时候也踩过坑！核心原因是两个带透明度的CSS背景规则同时命中了表头的第一列单元格——rgba的透明度是会叠加的，两个rgba(84, 46, 121, .2)叠在一起，就变成了接近.4透明度的同色系，看起来颜色就深了。下面给你几个优雅的解决思路：

方案1：缩小第一个规则的作用范围（推荐） #

原来的table.csr-table td:first-child会选中表格里所有行的第一列单元格，包括表头里的td。我们可以把它限定在tbody内，这样就不会影响表头的元素：

/* 只作用于tbody中的第一列td，避开表头 */
table.csr-table tbody td:first-child { 
  width: 70px; 
  background: rgba(84, 46, 121, .2); 
}
.headerCell,.headerRow { 
  background: rgba(84, 46, 121, .2); 
}

这个方案最干净，因为从根源上让两个规则的作用范围不重叠，不会有叠加的机会。

方案2：用:not()伪类排除表头单元格 #

如果你的表头td也带.headerCell类，可以直接在第一个规则里排除这些元素：

table.csr-table td:first-child:not(.headerCell) { 
  width: 70px; 
  background: rgba(84, 46, 121, .2); 
}
.headerCell,.headerRow { 
  background: rgba(84, 46, 121, .2); 
}

这样带.headerCell的第一列td就不会应用第一个规则的背景，自然就不会叠加了。

方案3：提升表头规则的优先级 #

如果不想修改第一个规则的范围，可以给表头的规则加更具体的选择器，让它的优先级超过第一个规则：

table.csr-table td:first-child { 
  width: 70px; 
  background: rgba(84, 46, 121, .2); 
}
/* 增加表格前缀，提升选择器优先级 */
table.csr-table .headerCell, table.csr-table .headerRow { 
  background: rgba(84, 46, 121, .2); 
}

CSS选择器优先级更高的规则会覆盖低优先级的，这样表头单元格就只会应用表头规则的背景，不会叠加。

注意：尽量别用!important来强制覆盖，虽然它能解决问题，但会让后续样式维护变得麻烦，优先级冲突会更难排查。

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