背景颜色不适用于我的页面答案

【问题标题】：background-color doesn't apply to my page背景颜色不适用于我的页面
【发布时间】：2017-01-14 05:41:51
【问题描述】：

在为我的 css 设置样式后，我想添加一个红色背景。问题是当我将 css 添加到我的正文时，它不适用于我的页面。

你能告诉我出了什么问题吗？为什么？

你可以在这里找到我的代码：https://codepen.io/jardi/pen/RGNZJV

body {  
  background-color:red;
}

#pageTitle {
  text-align:center;
  font-family:Monospace;
  color: rgb(51,22,225);
  padding:50px;
  font-size:30px;
}

.paraGraphs {
  font-size:20px;
  font-family:Times New Roman;
  margin-left:50px;
  margin-right:50px;
  text-align:justify;
}

#bottom-image{
  display: block;
  margin: 0 auto;
}

【问题讨论】：

标签： html css

【解决方案1】：

在您的 jsFiddle 中，背景颜色被此处的 jsFiddle 脚手架覆盖：

body { 
        background-color: #FFEEEE;
        color: #004;
        font-family: 'Roboto', sans-serif; 
    }

要进行测试，您可以像这样将 !important 添加到您的 CSS 属性值：

body {
  background-color:red !important; /* Prototype code only, !important bad */
}

在 jsFiddle 之外，几乎可以肯定其他东西正在覆盖您的身体背景颜色（我们看不到是什么）。要找出答案，请检查浏览器开发工具中 body 元素的“计算” CSS，看看是什么。

参考：Chrome Developer Tools: How to find out what is overriding a CSS rule?

一旦你看到什么 CSS 规则覆盖了你的背景，要么删除有问题的代码，要么确保你的选择器有更多的特异性，例如我添加了一个类：

body.myClass {
  background-color:red;
}

【讨论】：

【解决方案2】：

Codepen 有一个带有 Bootstrap 的脚手架 css，因此它的 bg 颜色为白色......如果你这样做，你会看到它，你可以通过这样做来仔细检查 codepen：

body {
    background-color: red !important;
}

但你不会需要那个 !important

更新

要绕过您的 Bootstrap 正文 bg，只需在之后添加一个 css 文件或像这样添加内联：

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="/css/yourfile.css" rel="stylesheet" />
      <style>
      body {
      background-color:red;

    }</style>

    </head>

【讨论】：

在发帖之前，我从 codepen 中检查了它。我创建了一个名为 index.html 的 html 文件，并将我的 css 文件链接到我的 html 文件中。一切都适用，但不是背景颜色：/。我在我的css中做错了什么吗？它应该以不同的顺序吗？当我添加 !important 时它可以工作，但我不明白为什么我必须添加重要
它是你的 Bootstrap 文件..在该文件之后我添加了该样式或在此之后添加一个 css 文件
很高兴这是有道理的，请批准答案@PierreJardinet

【解决方案3】：

根据您附加的链接，您的代码使用外部 CSS： https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

并且在这个 CSS 内部已经有一个 body 规则...

如果需要，只需在行尾添加“！important”即可强制使用颜色，例如：

body {
    background-color:red !important;
}

【讨论】：

我明白了，非常感谢:)。将来应该避免使用引导程序
@PierreJardinet：不要尝试避免引导程序，而是先尝试添加引导程序文件以加载，然后您可以添加自己的自定义 css，这样您就可以轻松地覆盖引导程序的 css。
"Just add !important" 是创建可维护 CSS 的糟糕建议。

【解决方案4】：

我可以通过使用 html 正文而不是正文来解决它：

html body {
    background-color:red;
}

【讨论】：

html body 有什么作用？

【解决方案5】：

在background-color: red; 之后，你已经为body 重新定义了背景颜色，所以添加！important，所以它不能被覆盖：

background-color: red!important;

【讨论】：

嗯，它是我的 css 样式中唯一的背景颜色，那么我为什么要覆盖它呢？感谢您的建议，但我想了解:)
要查看覆盖规则的内容，请使用以下开发人员工具检查您的正文元素：stackoverflow.com/questions/13867088/…。