Question

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

Bootstrap覆盖了我的自定义CSS。我确保我的自定义脚本文件低于bootstrap 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;
}

Answer 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以查看代码示例。

覆盖没有！important标签的bootstrap css

1 个答案:

CSS