如何轻松覆盖Bootstrap CSS

Question

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

例如 ：

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

可以不使用!important?来覆盖bootstrap.css !important?

Answer 1

您需要编写一个比您要覆盖的选择器更具体的选择器（或同样具体但以后要使用的选择器）。

选择器的特异性计算如下 ：

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

将三个数字abc（在基数较大的数字系统中）连接起来可得出特异性。

Answer 2

您只需要声明CSS AFTER Bootstrap，而不是之前。 然后，使用与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的最终颜色为红色，因为它是最新样式。

小提琴

但是，如果您将blue！important放进去，则div的颜色将变为蓝色，无论它是在CSS之前还是之后使div变为红色。