浏览器缓存导致CSS未更新，解决方法有二：强制刷新（Ctrl+F5或禁用缓存）或URL加版本号；生产环境应采用服务端缓存策略，如内容哈希命名或合理设置Cache-Control头。
浏览器缓存了旧的 CSS 文件，导致通过 <link> 引入的样式没更新——这不是代码写错了，而是缓存机制在“帮忙”。解决核心就两点：让浏览器主动放弃旧缓存、或让它把新文件当全新资源。
强制刷新或清空本地缓存
开发阶段最直接的办法：
- 普通刷新（F5 或点击刷新按钮）通常只检查文件是否“有变化”，但不重新拉取——它可能仍用缓存版本
- 用 Ctrl + F5（Windows/Linux）或 Cmd + Shift + R（Mac）进行硬性重载，跳过缓存强制请求新文件
- 开发者工具中勾选 Disable cache（Network 标签页右上角），所有请求都不走缓存，适合调试
- 手动清除浏览器缓存：设置 → 隐私与安全 → 清除浏览数据 → 勾选“缓存的图片和文件”
给 link 标签加版本号或时间戳
在 HTML 的 <link> 中添加查询参数，让 URL 看起来不同，从而绕过缓存：
立即学习“前端免费学习笔记（深入）”；
- 每次发布新版 CSS，改一下
v=后面的值（如v=1.0.3或用时间戳v=20240520） - 注意：这个参数对 CSS 文件本身无影响，服务器也不会处理它，纯属“骗”浏览器
- 避免用随机数（如
v=Math.random()），否则每次打开都请求新文件，失去缓存意义
服务端设置缓存策略更靠谱
前端加版本号是补救，真正长效方案是后端控制 HTTP 响应头：
- 对 CSS 文件返回 Cache-Control: no-cache（每次校验）或 max-age=31536000（一年，配合文件内容哈希）
- 生产环境推荐用“内容哈希”命名：比如
style.a1b2c3d4.css，文件名变了，URL 就天然不缓存 - 构建工具（Webpack/Vite）默认支持该功能，开启
filename: '[name].[contenthash:8].css'即可
基本上就这些。开发时多用硬刷新+禁用缓存，上线前确保构建带哈希或服务端配好响应头，基本不会卡在“明明改了却不生效”上。
