如何阻止Bootstrap table-hover覆盖优先级单元格背景色？

我在开发Django项目时，使用带有table-hover类的Bootstrap表格展示任务，需要根据优先级（高、中、低）为优先级单元格设置自定义背景色。但鼠标悬停在行上时，优先级单元格的背景色会变为表格默认悬停色，无法保留自定义颜色。

相关代码 #

HTML代码 #

<table class="table table-dark table-sortable table-hover">
    <thead>
        <tr>
            <th scope="col">Priority</th>
        </tr>
    </thead>
    <tbody id="table-body" class="table-body">
        <tr class="task-row">
            <td class="{% if task.priority == 'high' %}high-priority{% elif task.priority == 'medium' %}medium-priority{% else %}low-priority{% endif %}">
                {{ task.get_priority_display }}
            </td>
        </tr>
    </tbody>
</table>

CSS代码 #

.table .high-priority {
background-color: hsl(5, 39%, 30%) !important;
}

.table .medium-priority {
background-color: hsl(27, 64%, 40%) !important;
}

.table .low-priority {
background-color: hsl(146, 34%, 25%) !important;
}

.table .task-row:hover .high-priority,
.table .task-row:hover .medium-priority,
.table .task-row:hover .low-priority {
background-color: inherit !important;
}

已尝试方案 #

• 为背景色添加!important声明
• 为优先级单元格的hover状态设置background-color: inherit

需求：保留Bootstrap table-hover类的前提下，阻止优先级单元格背景色在行悬停时改变。

问题出在两点：一是Bootstrap的table-hover默认样式优先级比你当前的自定义hover规则更高；二是你用inherit会让单元格继承行的悬停背景色，违背了保留自定义颜色的需求。

直接修改CSS，使用更精准的选择器覆盖Bootstrap默认样式，同时明确指定优先级单元格的背景色即可：

/* 基础自定义背景色 */
.table .high-priority {
    background-color: hsl(5, 39%, 30%) !important;
}

.table .medium-priority {
    background-color: hsl(27, 64%, 40%) !important;
}

.table .low-priority {
    background-color: hsl(146, 34%, 25%) !important;
}

/* 行悬停时强制保留优先级单元格颜色 */
.table.table-hover .task-row:hover .high-priority {
    background-color: hsl(5, 39%, 30%) !important;
}

.table.table-hover .task-row:hover .medium-priority {
    background-color: hsl(27, 64%, 40%) !important;
}

.table.table-hover .task-row:hover .low-priority {
    background-color: hsl(146, 34%, 25%) !important;
}

如果想避免重复写颜色值，可以用CSS变量统一管理，代码更简洁易维护：

/* 定义全局颜色变量 */
:root {
    --high-priority: hsl(5, 39%, 30%);
    --medium-priority: hsl(27, 64%, 40%);
    --low-priority: hsl(146, 34%, 25%);
}

/* 基础样式 */
.table .high-priority {
    background-color: var(--high-priority) !important;
}

.table .medium-priority {
    background-color: var(--medium-priority) !important;
}

.table .low-priority {
    background-color: var(--low-priority) !important;
}

/* 悬停状态样式 */
.table.table-hover .task-row:hover .high-priority {
    background-color: var(--high-priority) !important;
}

.table.table-hover .task-row:hover .medium-priority {
    background-color: var(--medium-priority) !important;
}

.table.table-hover .task-row:hover .low-priority {
    background-color: var(--low-priority) !important;
}

原理：Bootstrap的table-hover核心样式是.table-hover>tbody>tr:hover>*，我们用.table.table-hover .task-row:hover .high-priority这种更具体的选择器，优先级会超过默认样式，再加上!important兜底，就能确保优先级单元格始终保持自定义背景色，同时保留表格其他行的悬停效果。

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