先确认css响应体开头是否为@字符（如@charset或@media），若出现等bom标记则说明utf-8 bom未清除。
看Network面板里CSS响应体开头是不是
如果CSS文件请求返回状态码是200，但响应内容第一行是或<code>，说明根本不是CSS——这是构建器/服务器把HTML当CSS发出来了。常见于：Vite或Webpack dev server路由未匹配到CSS路径、Laravel未配置public/css/静态资源路由、或者Nginx把.css请求代理到了PHP后端。
实操建议：
- 打开DevTools → Network → 筛选
css→ 找到对应CSS请求 → 点击 → 切到Response标签页 - 肉眼扫第一行：如果是
开头，100%不是CSS语法问题，是构建或部署链路出错 - 用
curl -I your-site.com/css/app.css确认HTTP头Content-Type是否为text/css；若返回text/html，问题不在CSS代码本身
控制台报“CSS parsing error”但Styles面板里规则全灰掉
这说明浏览器确实收到了CSS文本，也尝试解析了，但卡在某个语法点上直接放弃后续所有规则。典型表现是：你新加的.links块之后，.topnav、.footer等全部消失，Computed里颜色/间距全回退到默认值。
实操建议：
- 别信报错行号——它只标出“解析失败”的位置，真凶通常在它上面3–5行
- 重点检查每个
}后面有没有隐藏逗号、空格、BOM或换行符（VS Code按Ctrl+Shift+P→Toggle Render Whitespace） - 临时注释掉最近修改的整段规则（比如从
.links {到下一个}），刷新看其他样式是否恢复 - 特别盯
@use、@layer、@media这些at-rule前有没有空行或BOM——Sass/SCSS编译器对前置空白极其敏感
VS Code里没标红，但浏览器不认CSS
编辑器不报错 ≠ CSS能被浏览器执行。VS Code默认只校验基础语法，对@layer、自定义属性、嵌套写法等现代特性无感知；真正决定能否通过的是项目里的stylelint配置和语言模式绑定。
实操建议：
- 确认根目录有
.stylelintrc.json或stylelint.config.js；没有就跑npx stylelint --init - 检查VS Code设置：
stylelint.enable必须为true（默认是false） - 如果是
.module.scss文件，settings.json里得加"stylelint.validate": ["css", "scss", "less"]，且右下角语言模式手动选scss（不是大写的SCSS） - 关掉
editor.formatOnSave或把Prettier排除掉——它会提前格式化，跳过@layer等新语法，导致Stylelint来不及介入
为什么改一个{，整个导航栏都失效了
CSS解析器是单次、自上而下的线性扫描，不回溯、不容错。一个{没配对，或}后多一个逗号，就会让解析器当场放弃当前规则，并跳过其后所有有效声明——哪怕那些规则本身完全正确。
这意味着：错误位置越靠前，影响范围越大；.header块里出错，.nav和.footer可能全白忙活。开发者工具里看不到报错，但Styles面板中大量规则显示为strike-through或直接不出现，就是解析中断的信号。
最容易被忽略的一点：CSS解析错误不会阻塞HTML渲染，也不会抛JS异常，它只是静默丢弃后续规则。你得靠“本该生效却没生效”这个反常现象去反推，而不是等一个显眼的红字报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
