Chrome 74中外联样式表index.css不更新,其他文件正常
解决Chrome缓存CSS文件不更新的问题
看起来你遇到的是Chrome对静态资源的强缓存问题——这在本地开发时太常见了!PHP作为动态脚本,每次请求都会让服务器重新处理并返回最新内容,所以修改能立刻生效;但CSS属于静态文件,浏览器为了提速会默认把它缓存起来,哪怕你服务器上的文件已经更新,浏览器只要看到URL没变,就会直接用本地缓存的旧版本。
给你几个实用的解决方法,按优先级来:
- 强制刷新缓存:别用普通的F5,试试按
Ctrl+Shift+R(Windows/Linux)或者Cmd+Shift+R(Mac),这个快捷键会强制浏览器绕过本地缓存,重新从服务器拉取所有资源,包括你的CSS文件。 - 开发时禁用缓存:打开Chrome开发者工具(F12),切换到「Network」面板,勾选顶部的「Disable cache」选项(注意要保持开发者工具处于打开状态才会生效)。这样你在开发过程中修改CSS后,只要刷新页面就能看到最新效果,不用每次都手动强制刷新。
- 给CSS加版本号(推荐长期方案):修改你的
<link>标签,给CSS文件的URL加一个版本参数,比如:
每次更新CSS后,就把<link rel="stylesheet" type="text/css" href="index.css?v=1">v的值改一下(比如v=2、v=3),这样浏览器会认为这是一个全新的文件,就会主动请求服务器上的最新版本。这个方法不仅适合本地开发,上线后也能避免用户浏览器缓存旧样式的问题。 - 检查服务器端缓存:虽然本地XAMPP默认不会开启静态资源缓存,但如果之前修改过Apache的配置(比如httpd.conf里的
mod_expires或mod_headers模块),可以暂时关闭这些缓存相关的配置,重启Apache再试试。 - 再次确认文件路径:虽然你已经用记事本核对过内容,但再检查下index.css是不是真的保存在index.php所在的同一目录下?有没有可能保存时选错了文件夹,导致浏览器请求的还是旧的文件?
之前问题自行恢复,大概率是浏览器的缓存过期时间到了,自动重新请求了新文件。现在用上面的方法应该能立刻解决问题!
内容的提问来源于stack exchange,提问作者yuko
相关产品推荐
相关产品推荐

