如何轻松覆盖Bootstrap CSS

Question

我想问一下为什么在custom.css中需要使用!important来覆盖bootstrap.css中的一些样式，如： 输入，按钮，导航栏等

例如：

.navbar{
 background :#52B3D9;
 border-radius:0px !important;
 border-top:4px solid #1E8BC3 !important;}

可以在不使用!important?

的情况下覆盖bootstrap.css

Answer 1

你需要编写一个比你要覆盖的选择器更具体的选择器（或者同样具体但稍后）。

  

选择器的specificity is calculated as follows：

     

  
• 计算选择器中的ID选择器数量（= a）
  
• 计算选择器中的类选择器，属性选择器和伪类的数量（= b）
  
• 计算选择器中的类型选择器和伪元素的数量（= c）
  
• 忽略通用选择器
  
• 否定伪类中的选择器与其他选择器一样，但是否定本身并不算作伪类。
  

     

连接三个数字a-b-c（在具有大数字的数字系统中）   base）给出了特异性。

Answer 2

你只需要在引导之前声明你的CSS，而不是之前。然后使用Bootstrap使用的相同选择器。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom-styles.css" rel="stylesheet">

如果您使用LESS：

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

Answer 3

！important用于确保您的自定义更改覆盖引导程序的更改。您可以在没有重要的情况下覆盖bootstrap css，但是您需要确保自定义css在bootstraps样式之后出现。

示例：

div{
    background-color:blue;
}
div{
    background-color:red;
}

上面的css为div元素背景颜色着色。 div的结果颜色是红色，因为它是最新的样式。

继承人fiddle

但是，如果你把蓝色！重要的话，div的颜色将是蓝色，无论它是在css之前还是之后才能使div变红。