Vue3组件CSS修复：无需!important让后选择器样式生效

问题场景 #

编写Vue3组件时碰到了选择器样式覆盖失效的问题：目标<td>元素同时带有.in-selected-row、.in-selected-col、.in-selected-box和.selected-cell四个类，想要让第二个选择器的红色背景样式生效，但当前该样式被浏览器划掉，只有加!important才能强制生效。

编写的CSS代码 #

.in-selected-row.in-selected-box, .in-selected-col.in-selected-box {
  background-color: rgba(0, 128, 128, .25);
}

table tbody tr td.selected-cell {
  background-color: rgba(255, 0, 0, .25);
}

目标元素代码 #

<table><tbody>...<tr>...<td data-v-b4e148ca="" class="selected-cell in-selected-row in-selected-col in-selected-box"><input data-v-b4e148ca="" readonly="" class="sudoku-input"></td>...</tr>...</tbody><table>

浏览器渲染后的CSS #

.in-selected-row.in-selected-box[data-v-b4e148ca], .in-selected-col.in-selected-box[data-v-b4e148ca] {
  background-color: rgba(0, 128, 128, 0.25);
}
table tbody tr td.selected-cell[data-v-b4e148ca] {
  background-color: rgba(255, 0, 0, 0.25); /* 被划掉，未生效 */
}

问题原因 #

核心是CSS优先级计算规则：

• 第一个选择器：.in-selected-row.in-selected-box[data-v-b4e148ca] → 2个类选择器 + 1个属性选择器，优先级权重为 0,0,2,1
• 第二个选择器：table tbody tr td.selected-cell[data-v-b4e148ca] → 4个元素选择器 + 1个类选择器 + 1个属性选择器，优先级权重为 0,0,1,5

第一个选择器的类选择器数量更多，优先级更高，所以直接覆盖了第二个选择器的样式。

解决方案 #

不用依赖!important，只要提升第二个选择器的优先级即可，推荐几种实用方式：

方案1：增加类选择器数量 #

给第二个选择器加上目标元素已有的其他类，比如：

table tbody tr td.selected-cell.in-selected-box {
  background-color: rgba(255, 0, 0, .25);
}

这个选择器的权重为0,0,2,4，超过第一个的0,0,2,1，会优先生效。

方案2：简化选择器结构并保留足够权重 #

不需要写全table tbody tr td，保留关键元素选择器的同时增加类选择器，比如：

table td.selected-cell.in-selected-box {
  background-color: rgba(255, 0, 0, .25);
}

权重为0,0,2,2，同样能超过第一个选择器的权重。

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