CSS 为缓存创建问题？

Question

我正在制作一个网站，在使用 css 进行了一些编码之后，我将数据推送到了我的主机上。但是，网站 css 没有显示应有的内容！我在这里得到了很多支持，discord 和 namecheap（我的托管）。而且都说跟浏览器缓存有关

经过一些实验后，我得出结论，它会随着 wifi 连接而改变。我去了学校的 wifi，css 看起来很正常，但回到家后却不正常。

我找出错误并发现它与 1 css 文件有关。但是在将相同的代码放入不同的文件后，它工作正常。当然，当我将代码放入另一个文件时代码确实发生了变化，因为之前有 css。

这是似乎导致它的代码：

h1 {
  font-family: "JetBrains Mono ExtraBold", monospace;
  color: #2474ff;
  text-align: left;
  float: left;
  margin: 5px 30px;
  font-size: xxx-large;
  box-shadow: 0 0 25px 5px #0ff;
  border: solid dodgerblue 4px;
  border-radius: 15px;
  animation: crazy 3s infinite;
}

@keyframes crazy {
  50% {box-shadow: 1px 2px 3px blue}
} 

.content {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  border: 4px solid dodgerblue;
  box-sizing: border-box;
  width: 300px;
  height: 500px;
  padding: 5px;
  display: block;
  border-radius: 10px;
}
.content h3{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
button {
  font-family: "JetBrains Mono ExtraBold", monospace;
}
a {
  float: left;
  margin-left: 15px;

问题现已解决，但我想知道为什么会这样。

Answer 1

这是浏览器缓存的预期行为；这不是错误。您的浏览器会“记住”已下载的文件，并将该数据保存在本地一段时间，而不是重新加载和重新读取它，以便网站加载更高效。

既然您在开发和频繁更改文件时不希望出现这种情况，那么您可以做很多事情。这些只是其中的一部分：

• 内置于 Web 浏览器中的开发人员工具，如 Chrome Inspector（这也将在许多其他方面有益于您的开发）将有一个设置，可在浏览器缓存处于活动状态时禁用它，因此每次刷新时一个页面，它会自动下载最新的文件

• 您可以手动清除浏览器上的缓存。大多数浏览器都有快捷方式（例如，按住 shift 键的同时按下重新加载按钮）

• 确保其他人的 浏览器也下载您的css 文件的最新版本的一个简单方法是在您的 css link，并在每次更新时更改它。例如。： <link rel="stylesheet" type="text/css" href="styles.css?v=1"> （下次更新文件并希望确保每个人都能看到这些更改时，将 v=1 更改为 v=2）

Answer 2

这是浏览器的一项功能。解决此问题的最简单方法之一是“硬刷新”页面。

在 Windows 上是 ctrl + F5

在 Mac 上是 cmd + shift + r

CSS 为缓存创建问题？

CSS creating problems for cache?

html

css

hosting