Question

基本上我已经解决了我的问题，但我想了解为什么我需要这样做我是如何做到的。因此，我创建了一个简短示例，可在https://jsfiddle.net/herbert_hinterberger/9x22u934/

处找到

现在我想问为什么我需要在

中使用！important规则

.navbar-brand {
    color: #eae8e8 !important;
}

改变.navbar品牌的颜色？据我所知，自定义CSS应该覆盖bootstrap默认的css规则。但是出于任何原因，如果我不使用！important规则，则在自定义CSS规则之前应用引导默认CSS规则。参见

enter image description here

任何人都可以解释为什么我需要在这里使用！important规则吗？

祝你好运，赫伯特

Answer 1

您不需要每次都使用!important。

规则是，无论后来的css是什么。所以，如果你有

.aClass {
    color:red;
}

red.css

中的

和

.aClass {
    color:blue;
}

blue.css ，
并且在 red.css 之后包含 blue.css ，具有aClass的文字将为蓝色。

当您希望一条规则覆盖其他所有规则时，您只能使用!important。

编辑：在OP的评论之后，这个问题的实际答案就是这个。

在bootstrap.css文件中，我们有类似的内容：

.navbar-default .navbar-brand {
    color: #hashtag;
}

因此，当你这样做时：

.navbar-brand {
    color: #newHashtag;
}

它不会更改.navbar-brand调用的.navbar-default的颜色（您在HTML中通过.navbar-default使用此类）。在此，.navbar-brand是.navbar-default的后代。但是，当你输入!important时，它会告诉所有.navbar-brand改变颜色。

因此，如果您想更改.navbar-brand的颜色，请尝试以下操作：

.navbar-default .navbar-brand {
    color: #newHashtag;
}

有关详细信息，请阅读CSS中的后代选择器组合器。

Answer 2

当您想用自己的CSS覆盖bootstrap CSS时，需要在bootstrap之后包含自定义CSS。

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

Answer 3

这是因为css选择器引导程序使用'.navbar-header .navbar-brand'比你的更具特异性'.navbar-brand' 看到这个http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ 并尝试这个

.navbar-header .navbar-brand {
  color: #eae8e8;
}

Answer 4

以下是对您的问题的最佳解释

案例：1

<!-- HTML -->
<div class="blue box"></div>

/*CSS*/
div {
  height: 200px;
  width: 200px;
}

/*The Battle*/
.blue {
  background-color: blue;
}

.box {
  background-color: red;
}

在战斗中如何获胜？显然是最后一个，即

.box {
      background-color: red;
    }

背景颜色红色应用于div

其他Anwsers解释这种情况，在bootstrap.css之后编写自定义css文件，它覆盖bootstrap样式

案例：2

ID与班级

<!-- HTML -->
<div class="box" id="box"></div>
    /*CSS*/
div {
  height: 200px;
  width: 200px;
}

/*The Battle*/
#box {
  background-color: blue;
}

.box {
  background-color: red;
}

如何胜利？显然是id Win，Id根据“特殊性规则”被宣布为获胜者

根据特异性分数元素

内联式= 1000分（由css特性决定）
ID值100分。
课程值10分。
元素值1点。

示例：

#content .sidebar .module li a{}

得分是：

#content =100; .sidebar, .module = 10 +10; li, a = 1+1

总计：122

如果我们在前面添加一个id如下所示我们可以覆盖上面提到的样式因为下面提到的样式的分数是222

#main-container #content .sidebar .module li a{}

使用自定义CSS覆盖默认引导程序css仅适用于！important规则

4 个答案: