如何使用外部自定义 CSS 覆盖 bootstrap 3 样式？答案

【问题标题】：How do you override bootstrap 3 styles with external custom CSS?如何使用外部自定义 CSS 覆盖 bootstrap 3 样式？
【发布时间】：2014-09-04 00:57:26
【问题描述】：

如何使用外部自定义 CSS 覆盖 bootstrap 3 样式？

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "css/styles.css" rel = "stylesheet"/>


<div class = "navbar navbar-inverse navbar-fixed-top"></div>

CSS

.navbar-inverse {
    background-color: #FF0000;
}

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

有几点需要考虑：

样式表顺序 - 您尝试覆盖的样式表应该放在第一位。

6.4.1 Cascading order

最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。导入样式表中的声明被认为在样式表本身的任何声明之前。

在你的情况下，这应该不是问题。
```
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/overwrite.css" rel="stylesheet"/>
```

选择器特异性 - 阅读specificity (mdn)。

简而言之，您应该使用具有相同特异性的选择器（假设它稍后出现并且会覆盖初始声明），或者更具体的选择器。

Bootstrap 3 的默认样式使用以下navbar 的颜色：
```
.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}
```
您可以尝试使用更具体的选择器：
```
.navbar.navbar-inverse {
    background-color: #FF0000;
}
```

样式表路径 - 如果一切都失败了，那么您的样式表路径一定是错误的。

【讨论】：

【解决方案2】：

试试这个：

   .navbar-inverse { 
        background-color: #FF0000 !important; 
    }

【讨论】：