Bootstrap 5.3.1自定义背景色无法覆盖默认样式求助

将Bootstrap升级至5.3.1版本后，两个自定义表格行背景色无法覆盖Bootstrap默认颜色，即便添加!important也无效，但升级前的版本可以正常覆盖。

自定义样式代码如下：

table tr.shaded {
    background-color:#e1e9ff !important;
}
table tr.highlight {
    background-color:#eaeaf0 !important;
    font-weight: bold;
}

Bootstrap 5.3.1的tables.scss第5行包含以下代码：

.table {
    ...
    --bs-table-bg: var(--bs-body-bg);
    ...
}

我的CSS文件在Bootstrap文件之后加载。在Firefox调试器中取消勾选上述--bs-table-bg属性后，自定义背景色即可正常显示。

已确认CSS无拼写错误，升级前无需添加!important就能正常工作。Bootstrap文件为本地加载，网站仅在localhost运行。已在Firefox和Chrome中测试，且执行了强制刷新（Ctrl+Shift+R）。

补充HTML代码：

<div class="col-lg-10 col-sm-12 table-responsive">
    <table class="table table-hover table-sm table-borderless list">
        <thead>
            <tr class="shaded text-center align-middle">
                <th width="25">ID</th>
                <th>Project name</th>
                <th>Languages</th>
                <th>Client</th>
                <th>Completed</th>
                <th><strong>Profit</strong></th>
                <th>Paid?</th>
                <th>Invoice</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

方案1：覆盖CSS变量（推荐） #

Bootstrap 5.3.1改用CSS变量--bs-table-bg控制表格背景，直接针对自定义行类覆盖该变量即可，无需!important：

table tr.shaded {
    --bs-table-bg: #e1e9ff;
}
table tr.highlight {
    --bs-table-bg: #eaeaf0;
    font-weight: bold;
}

这种方式符合Bootstrap的设计逻辑，不会破坏其他样式优先级。

方案2：提升选择器特异性 #

强化选择器的优先级，让自定义样式能覆盖Bootstrap的变量生效规则：

.table tr.shaded {
    background-color: #e1e9ff !important;
}
.table tr.highlight {
    background-color: #eaeaf0 !important;
    font-weight: bold;
}

将原选择器table tr.shaded改为.table tr.shaded，利用Bootstrap直接作用在表格上的.table类提升特异性，配合!important即可生效。

方案3：重置表格背景变量（临时应急） #

如果需要快速解决，可将表格的--bs-table-bg重置为透明，但可能影响其他表格样式，不推荐长期使用：

.table {
    --bs-table-bg: transparent;
}

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