CSS样式不生效的首要原因是文件未被浏览器加载，需检查Network中CSS状态码是否为200、路径是否正确、@import位置是否合规；其次排查层叠顺序、继承特性、Flex/Grid容器声明缺失及生产环境Content-Type或混合内容问题。
样式没反应，先看 CSS 是否被加载
浏览器根本没拿到你的 CSS 文件，后面所有样式都白搭。常见现象是页面纯 HTML 结构，文字没颜色、没间距、布局还是默认流式。
- 打开开发者工具（F12），切到 Network 标签页，刷新页面，过滤
css，确认style.css或你引入的 CSS 文件状态码是200，不是404或blocked - 检查
<link>标签路径是否写错：相对路径容易漏掉./或多写一层../；用绝对路径时注意是否少了开头的/（比如写成css/style.css而不是/css/style.css） - 如果是通过
@import引入，注意它必须写在 CSS 文件最前面，且不支持在<style>块里跨域加载（会静默失败）
选择器写对了但样式不生效，优先查层叠顺序（CSS Specificity）
CSS 不是“后写的覆盖前写的”那么简单，浏览器按选择器权重决定谁赢。你写的 .btn { color: red; } 可能被一行内联样式 style="color: blue;" 或更重的选择器干掉。
- 在开发者工具的 Elements 面板里选中目标元素，右侧 Styles 里看哪些规则被划掉（
strikethrough），点开被划掉的那条，看右边注明的“specificity”值（比如0,1,0,1） - 避免滥用
!important—— 它只是临时止血，会让后续调试越来越难；真正该做的是简化选择器，比如把#header .nav ul li a.active缩成.nav-link.active - 注意继承：像
color、font-size会继承，但margin、width不会；别指望给父元素设margin来撑开子元素
用了 Flex/Grid 布局但内容不按预期排列
Flex 和 Grid 的行为高度依赖容器和子项的显式声明，缺一个关键属性就可能完全失效。
- Flex 容器必须先设
display: flex或display: inline-flex，只设flex-direction等子项属性是无效的 - Grid 容器要至少定义
display: grid+grid-template-columns（或grid-template-rows），否则子元素仍是普通块级流 - 检查是否意外触发了
min-width: auto（Flex 子项默认行为），导致内容撑开容器、破坏换行；加min-width: 0或overflow: hidden可抑制
样式在本地正常，上线后失效
生产环境常因构建、部署或 HTTP 头导致样式丢失或解析异常。
立即学习“前端免费学习笔记（深入）”；
- 检查构建工具是否把 CSS 提取到了单独文件但未正确注入 HTML（如 Webpack 的
MiniCssExtractPlugin配置遗漏） - 确认服务器是否返回了正确的
Content-Type: text/css响应头；Nginx/Apache 若配置不当，可能把.css当作text/plain返回，浏览器直接忽略 - HTTPS 页面里混用了 HTTP 的 CSS 链接（
http://cdn.example.com/style.css），现代浏览器会直接拦截并报Mixed Content错误
真正卡住人的，往往不是语法写错，而是某处路径少了个斜杠、某个父容器忘了设 display、或者上线时构建产物没更新——这些地方一漏，样式就彻底“隐身”，连报错都不会有。
