Question

我试图将我的html分解为单独的php文件，并且出现了一个我似乎无法破解的错误。这是第一个文件index.php

.topheader {
  background-color: #404040;
  color: white;
  padding: 16px;
}

.footer {
  background-color: #404040;
  color: white;
  padding: 16px;
}

<head>
  <link rel="stylesheet" href="./css/main.css">
</head>

<div class="topheader">
  <h1>KivaGIS</h1>
</div>

<div class="footer">
  <h1>Footer</h1>
</div>

截至目前，只有.topheader正在应用于html。我知道这两个类都是相同的，我打算在确认它们单独应用之后对每个类进行扩展。有人可以看看，并建议为什么.footer不适用于表格？

以下是我机器上输出的示例

Answer 1

似乎为我工作，.topheader和.footer具有不同的风格

＆＃13;

.topheader {
  background-color: #404040;
  color: blue;
  padding: 16px;
}

.footer {
  background-color: #404040;
  color: red;
  padding: 16px;
}

＆＃13;

<head>
  <link rel="stylesheet" href="./css/main.css">
</head>

<div class="topheader">
  <h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
  <h1>I AM RED</h1>
</div>

＆＃13;

Answer 2

这适用于您的文件，.topheader和.footer类都包含相同的样式。只需更改样式值，就可以看到差异

.topheader {
  background-color: #404040;
  color: white;
  padding:16px;
 }
.footer {
  background-color: #FFEE00;
  color: Red;
  padding:16px;
 }

Answer 3

检查此代码一次，并在代码中检查样式表的href。

<!DOCTYPE html>
<html>
<head>
 <style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
  <h1>KivaGIS</h1>
</div>

<div class="footer">
  <h1>Footer</h1>
</div>
</body>

Answer 4

正如许多人在此指出的那样，代码本身很好。我没有意识到Chrome会缓存CSS文件。我花了一整夜更新文件而没有看到任何更改，因为Chrome使用的是旧版本。

正如您从附带的screencap中看到的那样，我禁用了缓存，现在一切正常。

第二个CSS类不适用于div

4 个答案: