我的浏览器无法解释我的 css 文件答案

【问题标题】：My browser doesn't interprete my css files我的浏览器无法解释我的 css 文件
【发布时间】：2016-03-02 17:05:41
【问题描述】：

我刚刚开始了一个非常简单的练习，我创建了一个简单的 html 文件和一个 css 文件（在 css 文件夹中），以便了解有关 Angularjs 的更多信息。练习从创建这两个文件开始（所以还没有 Angularjs）。

由于某种原因，我的任何浏览器都没有呈现 css 文件。在 Chrome 上，我检查了 index.html 文件，然后单击资源，Css 文件就在那里！但它不起作用。

我不知道该怎么做，但这似乎是一个非常愚蠢的错误。我在几个地方读到它可能与一个名为 nginx.conf 的文件有关

index.html

<!DOCTYPE HTML>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Test Your Knowledge: Saturn</title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
     <body>
       <div id="myQuizz">


      </div>
  </body>
</html>

css/style.css

body { background-color: #fff; padding: 20px; }

#myQuiz {
 font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
 width: 650px; height: 650px;
 position: relative;
 overflow: hidden;
 color: #fff;
 background: #000 url(.../images/background.jpg) no-repeat 0px 0px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight: 100;} 
#myQuiz h3 {font-size: 2.4em; margin: 0px; font-weight: 100;}
#myQuiz p { margin: 0px 0px 14px 0px; }
#myQuiz .btn{
 display: inline-block;
 cursor: pointer;
 background-color: #c04b01;
 color: #fff;
 text-decoration: none;
 padding: 5px 15px;
 border-radius: 6px;
}
/* Intro */
#myQuiz  .intro { position: absolute; top: 225px; left: 40px; width: 550px;}
#myQuiz .intro p { margin: 0px 0px 40px 0px; }

【问题讨论】：

您的 HTML 没有内容（空 div），您希望看到什么？
它似乎设置了高度和宽度以及背景颜色，因此您至少应该看到颜色，除非它不在可视区域之外。我会尝试将 inline-block 更改为仅阻止以查看是否获得预期结果。
有一个错字：myQuizz vs. myQuiz
兄弟，检查你的html中myQuizz和css中myQuiz的拼写
您的 HTML 是空的，当然您什么也看不到！尝试将 body 规则更改为 body { background-color: red; padding: 20px; }，如果它是红色的，那么您的 CSS 正在工作。

标签： html css browser server

【解决方案1】：

正如其他人所注意到的，您在 HTML div 标签内拼错了您的 id。所以把 id="myQuizz" 改成 id="myQuiz"。

<div id="myQuiz"></div>

我创建了一个小提琴，它纠正了 myQuiz 的拼写错误，并添加了一个通用背景，以便您可以看到它。我也加了

background-size: 100%;
background-position: center;

只是为了让你能看到背景

http://jsfiddle.net/hb7du2xq/

【讨论】：

【解决方案2】：

伙计，要么从 id="myQuizz" 中删除一个“z” ... 或者在您的 CSS 选择器中添加一个“z”，例如 #myQuizz .... 浏览器无法解释 stles，因为它无法找到一个。 :)

【讨论】：

【解决方案3】：

一段时间后，我设法得到了您的错误，它与 css 文件或您的浏览器无关。这只是您的代码中的一个错字。

只需将 div 的 id 从 <div id="myQuizz"> 更改为 <div id="myQuiz">。这是因为您在 css 中使用了 #myQuiz{.....}

【讨论】：

【解决方案4】：

除了检查样式表的链接路径（css 必须在名为“css”的文件夹中）之外，我同意 Wesley，您必须将内容放入 div 中才能看到任何内容。如：

<p>Hello World.</p>

复制粘贴到这个里面：

<div id="myQuizz">

</div>

所以它看起来像这样：

<div id="myQuizz">
    <p>Hello World.</p>
</div>

【讨论】：

太糟糕了——不拿起我的 html 标签。