分号缺失或括号不匹配会导致CSS解析器静默跳过后续声明，破坏整个规则块结构，使部分或全部样式失效，且浏览器不报错。
分号缺失让浏览器直接跳过后续声明
CSS解析器把每个声明（如 color: red）当作一个独立单元处理，依赖分号 ; 作为结束标记。一旦某个声明末尾漏掉分号，解析器不会报错，而是把下一行内容“拼接”进来，当成同一声明的延续——结果就是整条语句语法非法，整块规则被静默丢弃。
常见现象：.btn { color: red; font-size: 14px background-color: #eee } 中 font-size 后缺分号，导致 background-color 声明完全不生效，且开发者工具 Styles 面板里根本看不到它。
- 不是只影响当前行，而是破坏整个
{ ... }块的结构完整性 - 浏览器不会在 Console 报错，只能靠手动检查或使用 W3C CSS Validator
- VS Code 等编辑器开启 “Highlight Matching Tag” 或安装 CSS Peek 插件可辅助定位
花括号不匹配会让后续所有样式失效
一个未闭合的 { 或多出来的 } 会彻底打乱解析器对规则块边界的判断。它可能把后面几个选择器都吞进当前块里，也可能提前终止整个样式表解析。
典型例子：.links { top: 10; left: 20; color: #fff; { } 中多出的 { 让解析器无法识别后续的 .topnav a:hover 等规则，即使它们语法完全正确。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询、
@keyframes、@import等顶层规则同样受此影响 - 错误位置往往不在报错行，而在前面某处——建议从文件开头逐个检查
{和}是否成对 - 用编辑器“折叠代码块”功能快速验证：能正常折叠的块，大概率括号是匹配的
为什么浏览器不报错反而更危险
CSS 设计上就是“容错解析”：遇到非法声明，直接跳过，继续往后读。这带来两个实际后果：
- 本地开发时一切正常，上线后因构建压缩（如移除空格/换行）暴露出原本被隐藏的语法断点
- DevTools 的 Styles 面板里“看不见你的规则”，但 Network 面板显示 CSS 文件状态码是 200，容易误判为加载问题
- 部分规则生效、部分失效，这种“半生效”状态比全失效更难排查
真正要盯住的，不是“有没有报错”，而是“Computed 面板里目标属性值是不是你写的那个”。如果不是，优先查语法，而不是改优先级或加 !important。
Vue 单文件组件里 style 区域特别容易踩坑
在 <style lang="scss"></style> 或 <style scoped></style> 里，嵌套语法 + 自动注入机制会让括号和分号问题更隐蔽。
比如：.btn { &--primary { color: blue; } &--large { padding: 10px; } } 如果中间不小心多打了个逗号，Sass 编译器可能报 SassError: Invalid CSS after "}"，但错误提示行号常偏移。
- Vue SFC 的
<style></style>标签内，哪怕只是多一个中文空格或 BOM 字符，都可能导致整个块解析失败 - 用 VS Code 的 “Render Whitespace” 功能打开，确认每行结尾没有隐藏字符
- 把
<style></style>内容单独复制到在线 Sass 编译器（如 sass.js.org）验证，能快速隔离是语法问题还是 Vue 注入问题
括号和分号不是装饰，是浏览器解析 CSS 的“路标”。少一个，整段路就没了——而且没人给你指路。
