Question

我有以下HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>Project Web</title>
</head>

<body>
  <h1>Hello, World!</h1>
</body>

<link href="index_style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</html>

和以下CSS（在index_style.css文件中）：

body {
  background-color: black !important;
  color: white !important;
}

正如您所知，“background-color”和“color”属性仅在它们后跟！important关键字时才会发生。为什么会这样？

Answer 1

您必须在引导代码之后添加index_style.css链接。

这是因为您的样式会被任何引导样式修改。

您希望首先使用bootstrap设置默认值，而不是使用您自己的代码更新这些属性。

这在CSS中称为Precedence，一旦你理解了它的工作方式，它就非常有用。

Precedence in CSS

我可以按照脚本的顺序看到另一个问题，正确的顺序应该是：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="index_style.css" rel="stylesheet">  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Answer 2

这种情况正在发生，因为您正在加载自己的CSS 之后的bootrap的CSS 。当你这样做时，Bootstrap的CSS会覆盖你所有的body个翻译，只有!important会导致它们被应用到bootstrap的declerations上。

要解决此问题，请按以下顺序加载CSS文件：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="index_style.css" rel="stylesheet">

Answer 3

此处调用css文件的正确顺序是问题，请在引导程序样式后使用自定义样式来修复此问题并覆盖其他组件的样式，因此正确的顺序如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Answer 4

正如其他人所说，你的CSS被覆盖了。包含外部CSS文件时，在外部文件之后添加自己的CSS文件。

覆盖规则也适用于CSS文件。

 body {
  background-color: black; 
  color: white !important;
  background-color: red;
 }

以下的背景颜色将为红色，因为背景颜色是最后声明的。

最后声明的内容将覆盖之前声明的内容。记住这一点，因为它将节省您将来的时间，并且它使得使用！important不必要

CSS body属性需要使用！imporant关键字

4 个答案: