是什么导致我的 HTML 文件不加载我的 CSS？ [复制]答案

【问题标题】：What causes my CSS not to be loaded by my HTML file? [duplicate]是什么导致我的 HTML 文件不加载我的 CSS？ [复制]
【发布时间】：2019-12-03 14:02:10
【问题描述】：

一切似乎都正确，但我的 CSS 没有加载。它出现在 devTools 的控制台中（使用 chrome），但实际上没有发生 CSS。

已经解决了很多关于此的问题，但没有提供解决方案的答案。
在 devTools 中禁用了缓存，没有变化，重新启用它没有变化。
对我的文件名的拼写进行了三次检查。
将文件移至同一目录
尝试添加 type="text/css" - 没有变化。

HTML：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div id='Container'>
    <div id="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div id="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

  </div>

CSS：

@charset "utf-8";

.Container {
  background-color: blue;
  display: grid;
  grid-template-rows: [one] 50px [two] 50px [rowEnd];
  grid-template-columns: [one] 150px [two] 300px [three] 150px [end];
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  text-align: center;
}

.unitList {
  background-color: red;
  grid-column: one / two;
  grid-row: one / rowEnd;
}

.roster {
  background-color: green;
  grid-column: three / end;
  grid-row: one / rowEnd;
}

我很确定这一定是一个简单的错误，但我的眼睛看不见？

【问题讨论】：

请原谅这个奇怪的标题，堆栈有一些严重的问题，我给它一个简单的描述性标题。
从添加<html>和<body>标签开始呢？

标签： html css

【解决方案1】：

您在 HTML 中使用 ids，但在 CSS 中使用 class 选择器。将您的 CSS 更改为：

#Container {
  background-color: blue;
  display: grid;
  grid-template-rows: [one] 50px [two] 50px [rowEnd];
  grid-template-columns: [one] 150px [two] 300px [three] 150px [end];
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  text-align: center;
}

#unitList {
  background-color: red;
  grid-column: one / two;
  grid-row: one / rowEnd;
}

#roster {
  background-color: green;
  grid-column: three / end;
  grid-row: one / rowEnd;
}

或者，您可以更改 HTML 以使用类而不是 id：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Army Builder</title>
  <link href="styles.css" rel="stylesheet">
</head>
  <div class='Container'>
    <div class="unitList">Unit List
    <ul id="list" style="list-style-type:none"></ul>
    </div>
    <div class="roster">Army Roster
    <ul id="armyRoster" style="list-style-type:none"></ul>
    </div>
    <script src="scripts/main.js"></script>

</div>

【讨论】：

也可以在 HTML 中将“id”替换为“class”

【解决方案2】：

你的css有错误。

在 Html 中，您正在编写需要在 css 中定义为 # 和类为 . 的 id

【讨论】：