火狐不加载CSS时，第一反应是检查Network面板中CSS请求状态码是否为200；若出现404、403、0或blocked，说明文件未成功获取，需排查路径错误、权限限制、CDN故障或扩展拦截等问题。
Network面板里CSS请求状态不是200怎么办
火狐不加载CSS，第一反应不该是改样式，而是确认它连文件都没拿到。很多“样式不生效”本质是“压根没加载”。
- 按
F12→ 切到Network标签 → 刷新页面 → 在筛选框输入.css - 看所有
.css请求的状态码：出现404、403、0或空白，说明路径错、权限拒、CDN挂了，或被 uBlock Origin 等扩展静默拦截 - 右键该请求 → “在新标签页中打开”，若跳转到登录页、显示 HTML 错误页、或返回空内容，证明服务器没返回合法 CSS——不是前端问题，是部署或路由配置问题
-
rel="stylesheet"拼错（比如写成sytlesheet、styleSheet）会导致请求根本不出发，Network 里完全看不到这条记录
Styles面板里找不到你的CSS规则
Network 显示 200，但 Elements 面板右侧 Styles 里压根没你写的规则，说明 CSS 被解析失败或选择器没匹配上。
- 检查 CSS 文件编码：火狐对
UTF-8 with BOM敏感，BOM 头会卡在@import或@media前导致后续整段失效；用 VS Code 打开 → 编码菜单 → 转为UTF-8 无 BOM→ 保存 - 逐行排查语法错误：漏
;、多}、@keyframes没闭合、grid-template-areas里引号不配对——火狐会静默丢弃出错行之后的所有规则 - 选中目标元素 → 看 Computed 面板里对应属性是否还是浏览器默认值（如
color: rgb(0, 0, 0)），若不是你设的值，大概率是选择器没命中 - 注意大小写：
.Header≠.header；空格语义：.container .btn（后代）≠.container.btn（同时含两个 class）
样式被覆盖但看不出是谁干的
CSS 层叠不是玄学，但优先级计算容易绕晕。火狐 DevTools 的 Styles 面板右侧有小箭头可展开“已应用”和“被覆盖”规则，得会读。
- 规则名左侧带删除线，说明被更高优先级规则覆盖；鼠标悬停能看到具体哪条规则胜出
- Bootstrap/Tailwind 这类框架 CSS 必须放在自定义 CSS 之前引入，否则它们的高权重规则会压死你的修改
-
!important是临时止血贴，不是解药；大量使用说明你没理清层叠顺序，或者用了 scoped style / CSS Modules 却忘了作用域隔离 - JS 动态插入的 DOM 节点，如果结构跟 CSS 选择器对不上（比如写了
body > .tip，实际节点在<section><p class="tip"></p></section>里），那规则就是废的
userChrome.css 或实验性 CSS（如 :has()）不生效
这类 CSS 不走网页流程，而是影响浏览器 UI 或启用前沿语法，有独立开关和路径要求。
立即学习“前端免费学习笔记（深入）”；
- 启用
toolkit.legacyUserProfileCustomizations.stylesheets：地址栏输about:config→ 搜索该选项 → 双击设为true -
userChrome.css必须放对位置：先访问about:support→ 点“显示文件夹” → 进入以.default-release结尾的配置目录 → 新建chrome文件夹 → 把userChrome.css放进去，保存为UTF-8 无 BOM - 改完必须彻底重启 Firefox，不是刷新页面；重启后若仍无效，打开
Browser Console（Ctrl+Shift+J）看是否有 CSS 解析报错 -
:has()等实验性伪类，除了开启上述选项，还需确认 Firefox 版本 ≥ 119（2023年10月起支持），旧版本即使开了也白搭
