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

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

有几件事需要考虑：

• 样式表顺序- 您尝试覆盖的样式表应该首先出现。

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

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