浏览器缓存CSS导致样式不生效，应优先禁用开发者工具中的缓存（Network面板勾选Disable cache），或为CSS链接添加版本号（如?v=1.0.1），同时检查样式是否被覆盖、作用域限制或优先级不足。
改了 CSS 样式却没看到效果，大概率是浏览器缓存了旧的 CSS 文件。直接刷新页面往往无效，因为浏览器可能仍从缓存加载样式表。解决的核心思路是让浏览器认为这是一个“新文件”，从而强制重新下载。
禁用浏览器开发者工具中的缓存
在开发过程中最快速有效的方式：打开浏览器开发者工具（F12），切换到 Network 面板，勾选 Disable cache（禁用缓存）。这个选项只在开发者工具开启时生效，不影响正常浏览，适合日常调试。
- Chrome / Edge：Network → 勾选 “Disable cache”
- Safari：Develop → Disable Caches（需先在偏好设置中启用“开发菜单”）
- Firefox：Network → 勾选 “Disable Cache”（仅在开发者工具打开时生效）
给 CSS 链接加时间戳或版本号（?v=xxx）
在 HTML 中引入 CSS 时，在文件路径后添加查询参数，例如：<link rel="stylesheet" href="style.css?v=1.0.1">。每次修改样式后手动或自动更新版本号，就能绕过缓存。
- 简单手动方式：改完 CSS 后把
v=1.0.1改成v=1.0.2 - 自动化建议：构建工具（如 Webpack、Vite）可自动哈希文件名（
style.a1b2c3.css），既去缓存又利于长期缓存管理 - 注意：不要用
?t=+new Date().getTime()这类实时时间戳上线，会导致无法利用缓存且增加服务器压力
检查是否被其他样式覆盖或优先级不足
样式“不生效”也可能是视觉上没变，而非未加载。比如你改了颜色，但被更具体的 CSS 规则覆盖了。
立即学习“前端免费学习笔记（深入）”；
- 在浏览器开发者工具 Elements 面板中，找到对应元素，看右侧 Styles 面板里你的样式是否被划掉（表示被覆盖）
- 尝试临时加
!important快速验证是否是优先级问题（仅调试用，勿提交） - 检查是否启用了 CSS-in-JS、Shadow DOM 或 scoped style（如 Vue 单文件组件），这些场景下样式作用域受限
清空浏览器缓存并硬性刷新
当上述方法不适用（比如测试环境没开开发者工具），可手动清缓存：
- Windows/Linux：Ctrl + F5（强制重载，忽略缓存）
- Mac：Cmd + Shift + R
- 或快捷键 Ctrl + Shift + Delete（调出清除浏览数据面板），勾选“缓存的图像和文件”再清除
不复杂但容易忽略。开发阶段优先用禁用缓存 + 版本号控制，上线前交给构建工具处理缓存策略，就能少踩很多“改了但没变”的坑。
