浏览器缓存导致css未更新的首要解决方法是强制刷新（ctrl+f5或cmd+shift+r）或禁用缓存调试；其次检查network面板状态码是否为304或from memory cache，确认缓存问题。
浏览器缓存导致 CSS 样式没更新
改完 style.css 刷新页面却还是旧样式，大概率是浏览器缓存了旧文件。本地开发时尤其明显，因为服务器没加版本控制或缓存头，浏览器直接复用内存或磁盘缓存。
- 强制刷新：Windows/Linux 按
Ctrl + F5（跳过缓存重载），Mac 是Cmd + Shift + R - 禁用缓存调试：打开 DevTools → Network 标签页 → 勾选
Disable cache（仅在开发者工具开启时生效） - 临时加版本号：把
<link rel="stylesheet" href="style.css">改成<link rel="stylesheet" href="style.css?v=1.0.1">，每次改样式顺手改个数字 - 检查 Network 面板里
style.css的响应状态码：如果是304 Not Modified或 Size 显示from memory cache，就确认是缓存问题
CSS 选择器优先级不够被覆盖
样式写了但没生效，常见原因是另一条规则权重更高，把你写的“盖”掉了。CSS 优先级不是按书写顺序，而是按选择器的“具体程度”算出来的。
- 计算优先级口诀：
内联样式 > ID 选择器 > 类/属性/伪类 > 元素/伪元素；例如#header .nav a:hover比.nav-link权重大得多 - 用 DevTools 的 Elements 面板点中目标元素，右侧 Styles 标签里看哪些声明被划掉（灰色删除线）——被划掉的就是被更高优先级规则覆盖了
- 避免滥用
!important：它能强行提权，但会破坏可维护性；真要用，只加在单个声明后，比如color: red !important;，而不是整条规则 - 注意继承：像
font-size、color这类属性会继承父级，但padding、margin不会；别误以为“没写就是没生效”，可能只是本来就不该生效
HTML 元素没匹配上选择器
样式写对了，但目标元素压根没被选中——最常发生在 class 名拼错、层级关系理解偏差、或 JS 动态插入内容后 DOM 结构变化。
- 检查元素实际 class：右键审查元素，看
class属性值是否和 CSS 里写的完全一致（包括空格、大小写、连字符）；.btn-primary不等于.btn primary - 验证嵌套路径：比如写了
.card .title，但 HTML 里是<div class="card"><h2 class="title">，这没问题；但如果写成 <code>.card > .title（子选择器），而中间多了一层<div>，就会失效 <li>动态内容要等 DOM 就绪：JS 插入的元素，如果 CSS 规则在插入前就已加载，通常不影响；但若用了 <code>document.write或框架（如 Vue 的v-if）延迟渲染，得确认元素真实存在后再查 - 注意伪类时机：比如
a:visited只对已访问链接生效，:hover需要鼠标悬停才能触发，在 DevTools 里可以右键元素 → “Force state” 模拟 -
@import必须写在所有其他规则之前（除@charset），否则无效；且它会阻塞后续 CSS 解析，性能差，不推荐在<style></style>块里用 - 多个
<link>标签按 HTML 中出现顺序加载，后加载的 CSS 有更高“层叠权重”（cascade layer），即使选择器优先级一样，也会覆盖前面的 - 检查 Sources 面板里的文件加载顺序，再对照 Elements → Styles 里各条规则的来源（右边显示文件名和行号），确认你改的那条到底有没有被加载进来
- Webpack/Vite 等构建工具会把 CSS 提取合并，此时原始
@import顺序可能被优化打乱，需看最终生成的 CSS 文件内容来判断
@import 和 link 加载顺序引发的覆盖
多个 CSS 文件通过 @import 或多个 <link> 引入时，加载顺序决定最终生效规则。顺序靠后的文件里同名规则会覆盖前面的——但前提是优先级相同。
立即学习“前端免费学习笔记（深入）”；
