覆盖引导程序背景颜色答案

【问题标题】：Overriding bootstrap's background colours覆盖引导程序背景颜色
【发布时间】：2020-03-20 23:26:22
【问题描述】：

我正在尝试覆盖引导程序用于其“bg-dark”类的背景颜色。为此，我已将其导入到一个单独的 CSS 文件中：

.bg-dark {
  background-color: black;
}

但这似乎并没有改变背景颜色。如果我这样做，尽管它确实有效：

.bg-dark {
  background-color: black !important;
}

这是为什么？有没有我这样做而不必诉诸于！important？

【问题讨论】：

【解决方案1】：

不要使用已经定义的同一个类。使用用户定义类并设置颜色

【讨论】：

【解决方案2】：

!important 关键字意味着无论加载顺序如何，该规则都优先于其他所有类。这很糟糕，因为它违背了级联（即你现在永远不能干净地覆盖它）

您需要确保您的样式表在引导后加载，并且您将能够成功覆盖

【讨论】：

【解决方案3】：

好问题，

CSS 的工作方式是样式越接近元素越重要，但是，!IMPORTANT 标记会覆盖其他标记。例如，如果您要在元素内部编写 style="background-color:black"，它将覆盖设置背景颜色的外部样式表。

希望这会有所帮助！

【讨论】：