CSS为缓存创建问题？答案

【问题标题】：CSS creating problems for cache?CSS为缓存创建问题？
【发布时间】：2021-09-30 05:12:29
【问题描述】：

我正在制作一个网站，在使用 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;

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

【问题讨论】：

标签： html css hosting

【解决方案1】：

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

由于您在开发和频繁更改文件时不希望出现这种行为，因此您可以做很多事情。这些只是其中的一部分：

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

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

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

【讨论】：

感谢您清理它。我只是很困惑！

【解决方案2】：

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

在 Windows 上是 ctrl + F5

在 Mac 上是 cmd + shift + r

【讨论】：