使用自定义 CSS 覆盖默认引导 css 仅适用于 !important 规则答案

【问题标题】：Overwriting default bootstrap css with custom CSS only works with !important rule使用自定义 CSS 覆盖默认引导 css 仅适用于 !important 规则
【发布时间】：2015-09-02 04:43:59
【问题描述】：

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

获得

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

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

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

谁能解释一下为什么我需要在这里使用 !important 规则？

最好的问候，赫伯特

【问题讨论】：

只需在引导 .css 文件后包含您的 css 文件，然后无需键入 !important
@user3756181：谢谢。我已经这样做了，它运行良好，除了 .navbar-brand。同样在 jsfiddle 示例中，您可以看到其他自定义 CSS 规则在没有 !important 的情况下也能很好地应用。只是 .navbar-brand 出于任何原因都需要 !important 规则。

标签： css twitter-bootstrap google-chrome-devtools

【解决方案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 的颜色（您在HTML 中通过.navbar-default 使用此类）。这里，.navbar-brand 是.navbar-default 的后代。但是，当您输入!important 时，它会告诉所有.navbar-brands 更改颜色。

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

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

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

【讨论】：

感谢您的解释。这也很有效，除了 .navbar-brand。同样在 jsfiddle 示例中，您可以看到“稍后”（自定义）CSS 规则在没有 !important 的情况下得到了很好的应用。只是 .navbar-brand 出于任何原因都需要 !important 规则。
@HH。请查看更新的答案是否解释了它。谢谢你，我今天也学到了一些新东西：D
完美。您明白了，感谢您提供更多信息。

【解决方案2】：

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

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

【讨论】：

谢谢。我已经这样做了，它运行良好，除了 .navbar-brand。同样在 jsfiddle 示例中，您可以看到其他自定义 CSS 规则在没有 !important 的情况下也能很好地应用。只是 .navbar-brand 出于任何原因都需要 !important 规则。

【解决方案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;
}

【讨论】：

【解决方案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 根据规则被宣布为获胜者

根据特异性的元素分数

inline-style = 1000 分（由 css Specificity 决定）
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{}

【讨论】：

感谢您的解释。我学到了一些新东西。但实际上 Ranveer 的评论是正确的答案。