覆盖Bootstrap默认！重要颜色代码

Question

我正在使用Bootstrap并尝试开发此网站。特别是使用他们的bg-primary类别，它将默认颜色设置为皇家蓝。但是，我需要在“订阅”按钮上匹配青色的颜色。但是，正如您在检查中看到的那样，卡片背景的颜色具有蓝色的默认设置，并带有重要标签。

我改变bg-primary颜色的CSS无法覆盖自然颜色的Bootstrap设置，因为它们在其上放置了重要的标签（即使我的重要标签也不会覆盖它们）。

.bg-primary {
    background-color: #3292a6 !important;
}

如何进入并不可撤销地删除.bg-primary类的Bootstraps default！important标记？

Answer 1

<强>尝试：

.card.bg-primary {
  background-color: #3292a6 !important;
}

原因如下：

使用CSS（层叠样式表）有一个名为“specificity.”的概念我的上述规则将起作用，因为它使用两个类（.card＆amp; .bg-primary）而不是仅仅一个类（.bg -Primary）。

一般来说，为了覆盖引导类，我通过在前面添加一个类来使我的css规则更具体（注意：这不会神奇地起作用，特别是使用Bootstrap nav！你必须检查样式，看看哪些引导规则应用并创建一个更具体的规则。这可以是tedius，并且可能有更好但更复杂的方式。）

Answer 2

你必须覆盖很多东西（`：hover＆＃39;以及＆＃39;禁用＆＃39;等等）我建议创建一个新的css类：

buttonColor {
   border: none;
   background-color: black;
   color: white; 
   padding: 10px 20px;

}
buttonColor:hover {
   cursor: pointer;
   background-color: white;
   color: black;  
}

Answer 3

您只需要使用自己的bg-primary课程来覆盖课程，并在其中添加!important标记。

请参阅此SO - How to override !important?

此Mozilla帖子 - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important

Answer 4

有两种常见的方法。

如果你只想在几个地方覆盖它，那么Jesse Phillips的首选解决方案是最好的，但如果你想全局覆盖它并且你可以直接访问如何解析标题，那么你只需要确保你的CSS规则包含在文档后面，而不是Bootstrap

<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/customStyle.css">

然后你要做的就是在你的规则中添加一个！important标记，以匹配你要覆盖的类。

编辑：我有时会看到人们推荐的第三个选项是将bootstrap.css保存在本地服务器并删除那里的！important标签，但这不是一个好主意，因为如果你尝试过，你会失去这个改变将您的引导程序更新为更新版本。