Bootstrap 5颜色继承管理：自定义背景类文本样式优先级问题

问题原因 #

你的两个选择器.bg-lvl1 .text-success和.bg-lvl2 .text-success的CSS特异性完全相同（均为两个类选择器组成的后代选择器）。当#nested元素同时属于.bg-lvl2的后代和.bg-lvl1的后代时，后声明的.bg-lvl2 .text-success规则会覆盖先声明的.bg-lvl1 .text-success样式，导致预期颜色无法生效。

解决方案 #

方案1：增强选择器特异性（推荐） #

针对嵌套场景添加更精确的层级选择器，提升.bg-lvl1 .text-success的优先级：

.bg-lvl1 {
  background-color: #303333;
}

.bg-lvl2 {
  background-color: #222424;
}

.bg-lvl1 .text-success {
  color: #00d750 !important;
}

/* 新增规则，匹配.bg-lvl2内的.bg-lvl1下的text-success */
.bg-lvl2 .bg-lvl1 .text-success {
  color: #00d750 !important;
}

.bg-lvl2 .text-success {
  color: #00c74a !important;
}

该选择器包含3个类选择器，特异性高于.bg-lvl2 .text-success（2个类），会优先应用样式。

方案2：移除!important并调整声明顺序（仅适用于非嵌套场景补充） #

如果可以放弃!important，可将.bg-lvl1 .text-success的声明放在.bg-lvl2 .text-success之后，利用同特异性下后声明优先的规则：

.bg-lvl1 {
  background-color: #303333;
}

.bg-lvl2 {
  background-color: #222424;
}

.bg-lvl2 .text-success {
  color: #00c74a;
}

.bg-lvl1 .text-success {
  color: #00d750;
}

注意：此方法仅能解决非嵌套场景，嵌套时.bg-lvl2 .text-success仍会匹配目标元素，因此方案1更可靠。

方案3：结合ID选择器（仅适用于单个元素） #

直接针对#nested元素使用更高特异性的选择器：

#nested.text-success {
  color: #00d750 !important;
}

此方法耦合了元素ID，复用性较差，仅适合单个元素的特殊场景。

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