Question

如何使用外部自定义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;
}

Answer 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;
}
```

样式表路径 - 如果所有其他方法都失败，则样式表路径必定是错误的。

Answer 2

试试这个：

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

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

2 个答案: