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

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级联顺序

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

  在你的情况下，这不应该是一个问题。

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

---

• 选择器特异性-读取特异性（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; 
    }