我正在为Vue3组件编写CSS，但我无法让一个 Select 器覆盖另一个 Select 器.我的目标元素有.in-选定行、.in-选定列、.in-选定框和.选定单元格类，但我只想应用第二个 Select 器中的样式.
我认为第二个 Select 器会比第一个 Select 器更具体，但我能够让它工作的唯一方法是添加！Important属性.
以下是代码:
.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); <- striked through
}