除非我清除浏览器缓存，否则为什么不应用我的 CSS？答案

【问题标题】：Why isn't my css applied unless i clean browser cache?除非我清除浏览器缓存，否则为什么不应用我的 CSS？
【发布时间】：2019-10-15 00:12:43
【问题描述】：

我正在为一个学校项目制作一个简单的网站。在我将 php 添加到代码之前，一切都很顺利。现在由于某种原因，它不想每次都应用我的 css 更改。我在一些网站上验证了 html、css 和 php，一切似乎都很干净。然后我看到一篇文章说我必须清除缓存才能应用 css。它工作（使用chrome）虽然现在我必须在每次css更改后清理它，否则它不会被应用。我唯一想到的是我在 PhpStorm 中工作，但使用 xampp 而不是 PhpStorm 内置浏览器检查代码，尽管它在 php.ini 之前一直运行良好。有没有比每次css更改后清除缓存更好的方法？

【问题讨论】：

这与 PHP 无关。这取决于您的服务器，例如Apache 来指定浏览器应该如何缓存静态文件。

标签： php html css google-chrome

【解决方案1】：

您可以编辑服务器设置，但我只是养成了“Hard Refresh”而不是刷新的习惯。

在开发网站时，我总是使用硬刷新而不是常规刷新，以避免从缓存中拉出旧的东西。只需按 Ctrl + shift + r 即可硬刷新，或查看上面的链接以获取不同系统和浏览器上的快捷方式列表。

【讨论】：

【解决方案2】：

在 Chrome 中，我建议您在开发者工具打开时禁用缓存。

为此，请打开 Chrome 的开发者工具（按 F12），然后打开设置（按 F1）。在Network 标题下找到标记为Disable cache (while DevTools is open) 的复选框。

启用此功能后，在您进行开发工作时保持开发工具窗口打开，Chrome 将不再缓存您的 CSS 文件并始终加载最新版本。

【讨论】：

【解决方案3】：

在您要导入 css 的链接中添加一个随机查询字符串。这样，Chrome 就不会将其识别为静态资产，而是始终从服务器获取最新版本。

如果您需要增强缓存，请务必在上线前将其删除。

使用php它看起来像这样：

<link href="style.css?v=<?=rand(1,1000)?>" />

这样一次是style.css?v=28，下次是style.css?v=674，然后是style.css?v=18等等，所以没有浏览器会缓存这个样式。

【讨论】：