css - 使用自定义 CSS 覆盖默认 Bootstrap css 仅适用于 !important 规则

Question

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

现在我想问为什么我需要在里面使用!important规则

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

改变.navbar-brand 的颜色？据我了解，自定义 CSS 应该覆盖 Bootstrap 默认的 css 规则。但是出于任何原因，如果我不使用 !important 规则， Bootstrap 默认 CSS 规则将在自定义 CSS 规则之前应用。见

谁能解释一下为什么我需要在这里使用 !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-default 调用的 .navbar-brand 的颜色(您通过 .navbar-default 使用此类 在你的 HTML 中)。这里，.navbar-brand 是 .navbar-default 的后代。但是，当您输入 !important 时，它会告诉所有 .navbar-brand 更改颜色。

因此，如果您确实想更改 .navbar-brand 的颜色，请尝试以下方法:

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

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