在<link>标签href属性末尾添加?v=、?t=或?hash=等查询参数可强制浏览器更新CSS缓存，参数须位于文件路径末尾且在锚点前，构建工具可能清除该参数需配置避免。
浏览器缓存导致CSS没更新怎么办
直接在 <link> 标签的 href 后加版本号参数，是最简单有效的强制刷新方式。浏览器把带不同查询参数的URL当作新资源，自然绕过缓存。
<link rel="stylesheet"> 的 href 里怎么加版本号
在 CSS 文件路径末尾追加 ?v=xxx 或 ?t=123456789 这类查询参数即可：
<link rel="stylesheet" href="style.css?v=2.1.0">
常见做法包括：
-
?v=1.2.3：用语义化版本号，人工维护，适合发布流程规范的项目 -
?t=<timestamp>：构建时注入时间戳（如?t=1715823400），确保每次构建都不同 -
?hash=abc123：用文件内容哈希值（如 Webpack 的[contenthash]），内容变则参数变，最精准
注意：v、t、hash 这些参数名本身无特殊含义，纯属占位；服务器不会解析，只影响浏览器缓存判断。
立即学习“前端免费学习笔记（深入）”；
为什么不用 Cache-Control: no-cache 或 meta http-equiv
这些方式不可靠：
-
Cache-Control是响应头，需后端配合设置，静态托管（如 GitHub Pages、CDN）往往不支持动态改头 -
<meta http-equiv="Cache-Control">在<link>加载前才解析，对已缓存的 CSS 无效 - 开发时禁用缓存（DevTools 勾选 “Disable cache”）只作用于当前调试会话，不能解决用户端问题
版本号参数是前端可控、服务端无关、对用户生效的最小改动。
容易踩的坑：参数位置和构建工具干扰
加错位置或被自动清理，会导致失效：
- 参数必须加在文件路径**末尾**，且在
#锚点之前（style.css?v=1#section✅，style.css#section?v=1❌） - 某些构建工具（如 Vite、Webpack）默认会清除 URL 中的查询参数，需检查配置是否启用了
assetInlineLimit或url-loader的ignoreUrlParametersMatching - 用
import方式引入 CSS（如import './style.css'）时，版本号参数无效——那是 JS 模块解析逻辑，不走 HTML link 缓存机制
真正起作用的，永远只是 HTML 中那个 <link href="..."> 的完整 URL 字符串。
