覆盖没有 !important 标记的引导 css答案

【问题标题】：override bootstrap css without !important tag覆盖没有 !important 标记的引导 css
【发布时间】：2017-03-24 12:32:09
【问题描述】：

我搜索了一下，找不到干净的解决方案。

Bootstrap 正在覆盖我的自定义 CSS。我已确保我的自定义脚本文件位于引导 css 文件下方，但这仍然不能解决问题。

如果我将!important 标记附加到font-size 上，那就可以了。我只是想在一切草率且耗时的情况下经历并输入!important。想法？

如果这与我的问题密切相关，我正在运行一个 rails 应用程序。

脚本

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">

CSS

h1 {
  font-weight: 600;
  color: #fff;
  font-size: 5.5em !important;
}

【问题讨论】：

请显示您的 HTML，以及您尝试应用到它的 CSS。
因为 Bootstrap 在其类上具有更高的 specificity，因此如果不使用 !important 或使用 Bootstrap 使用的相同特异性，则无法覆盖它们
添加了我的html和css
先尝试添加你的css。

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

您需要使用CSS specificity 覆盖默认的Bootstrap CSS，而不使用!important。所以你的h1 标签可以使用以下方式定义：

CSS

body h1 {
  color: #fff;
  font-size: 5.5em;
  font-weight: 600;
}

只需在您的任何 CSS 声明之前添加 body 即可覆盖 Bootstrap CSS。请参阅 this Code Pen 以查看您的代码示例。

【讨论】：