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

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