根本原因是浏览器缓存了旧css文件，未向服务器请求新版本；可通过禁用缓存、强制重载、添加查询参数、启用hmr、使用内容哈希命名及配置http缓存头等方式解决。
为什么 CSS 修改后要刷新页面才生效
根本原因不是 CSS 本身延迟，而是浏览器把旧的 style.css 或内联样式缓存住了，加载时直接复用本地副本，跳过了服务器请求。你改了文件，但浏览器根本没去拉新版本。
如何确认是缓存导致的样式不更新
打开开发者工具（F12），切到 Network 面板，勾选 Disable cache（仅在 DevTools 打开时生效），然后刷新页面。如果此时样式立刻生效，基本可以锁定是缓存问题。
-
Status列显示200（来自内存或磁盘缓存）而非304或200 OK（真实响应），说明命中了强缓存 - 查看
Response Headers中是否有Cache-Control: max-age=31536000或Expires远期时间 - 右键检查元素，看
Computed面板里实际应用的样式是否和你编辑的源码一致
开发阶段快速绕过缓存的几种方法
别依赖 Ctrl+R，它默认可能仍走缓存；要用真正强制重载的方式：
-
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（macOS）：跳过缓存，重新请求所有资源 - 在地址栏按
Enter前加个问号或时间戳，比如把style.css改成style.css?v=1.0.1或style.css?t=1715829340—— 这属于「缓存失效」技巧，适合手动调试 - Webpack/Vite 等构建工具开启
devServer.hot: true后，CSS 修改会自动注入，无需整页刷新（但需确保没禁用 HMR）
上线后怎么避免用户看到旧样式
靠用户手动刷新不现实，得从部署和 HTTP 头入手：
立即学习“前端免费学习笔记（深入）”；
- 静态资源（如
main.a1b2c3.css）用内容哈希命名，每次构建生成新文件名，HTML 中引用也随之更新 —— 这是最可靠的方式 - 非哈希资源（如
vendor.css）可通过Cache-Control: no-cache或max-age=0强制协商缓存，让浏览器每次发If-None-Match请求校验 - 避免给 CSS 设置过长的
max-age（比如一年），除非你确定内容绝对不变
最容易被忽略的是：CDN 和反向代理（如 Nginx）也会缓存响应，光改前端代码没用，必须同步清理 CDN 缓存或配置其遵循源站 Cache-Control 头。
