使用外部 CSS 覆盖 Bootstrap 主按钮答案

【问题标题】：Overwriting Bootstrap Primary Button with external CSS使用外部 CSS 覆盖 Bootstrap 主按钮
【发布时间】：2016-12-03 22:56:43
【问题描述】：

具有以下 CSS 代码，并希望引导按钮在按钮处于“活动”（意味着按下）时从其默认的“蓝色”颜色更改为值 #954900；但它保持蓝色不变。从教程中复制代码并了解您需要“涵盖所有情况”，但我在这里缺少什么？注意：我确保在 head 中也包含了 AFTER bootstrap CSS 链接之后的外部样式表。感谢所有帮助..

.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;}

.btn-primary {
background: #EC811C;
color: #ffffff;}

.btn-primary:hover , .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary  {
background: #F89F4A;}

.btn-primary:active, .btn-primary.active {
background: #954900;
box-shadow: none;}

HTML

<button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Search</button>

【问题讨论】：

试试“爱恨情仇”。即：a:link、a:visited、a:focus、a:hover、a:active。（这应该是顺序）
可能是一个特异性问题。请分享相关的html和css，让我们重现问题。
好点@HiddenHobbes 我已经编辑了我的帖子

标签： html css twitter-bootstrap button

【解决方案1】：

确保在引导后包含您的自定义 css 也尝试在每个规则之后添加 !important 以查看是否有帮助。喜欢

.btn-primary:active, .btn-primary.active {
    background: #954900 !important;
    box-shadow: none !important; 
}

edit：正如 Krzysztof Dąbrowski 在他的评论中所说的 !important 不是正确的解决方案，它更像是一个调试技巧，以确认您正在编辑正确的 css 规则。如果它与 !important 一起使用，您应该确认您的 CSS 文件是在 boostrap 之后加载的，因为 Web 浏览器优先考虑最后读取的 css 规则。

如果它不能解决您的问题，请分享更多代码。

【讨论】：

请不要添加!mportant。你应该避免它。在这种情况下，没有必要这样做。如果将 CSS 放在 Bottstrap 之后，则不需要 !important。

【解决方案2】：

如果您使用的是Bootstrap 的Sass 版本，则可以使用button-variant mixin。如果你必须使用普通的CSS，你可以看一下这个mixin的内容，并以相同的顺序以完全相同的方式编写它。那么一切都应该 100% 兼容和覆盖。

mixin 在这里：

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss

【讨论】：

【解决方案3】：

谢谢大家，这对我有用：

.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;}
.btn-primary {
background: #EC811C;
color: #ffffff;}
.btn-primary:hover , .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary  {
background: #F89F4A;}
.btn-lg:active, .btn-lg.active, .btn-block:active, .btn-block.active, .btn-primary:active, .btn-primary.active  {
background: #954900 !important; 
box-shadow: none !important;}

【讨论】：