Question

在设计我的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;
}

Answer 1

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>

Answer 2

您已在background-color: red;之后为身体重新定义了背景颜色，因此添加！important，因此无法覆盖：

background-color: red!important;

Answer 3

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

html body {
    background-color:red;
}

Answer 4

在你的jsFiddle中，背景色被这里的jsFiddle脚手架覆盖：

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

要进行测试，您可以在CSS属性值中添加！important，如下所示：

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;
}

Answer 5

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

在这个CSS里面已经有了一个规则......

如果你愿意，只需在行尾添加“！important”来强制你的颜色，例如：

body {
    background-color:red !important;
}

background-color不适用于我的页面

5 个答案: