中文逗号（U+FF0C）会导致整条CSS规则被浏览器静默忽略，必须使用半角英文逗号；逗号前后空格不影响匹配，但旧工具链可能解析异常；误将逗号写成空格会意外变为后代选择器，语义完全改变。
逗号分隔时中文逗号直接导致整条规则失效
浏览器遇到中文逗号，（U+FF0C）会完全忽略该条 CSS 规则，不解析、不报错、不生效——这是最隐蔽的“消失型错误”。开发时从文档或设计稿复制样式容易带入中文标点，尤其在中文输入法下未切换为英文模式。
✅ 正确写法必须用半角英文逗号,：h1, p, .title { color: red; }
❌ 错误示例（看似一样但无效）：h1，p，.title { color: red; }（含中文逗号）
建议在编辑器中开启“显示不可见字符”功能，或使用 ESLint 插件 stylelint-selector-no-unknown 类规则提前拦截。
逗号前后空格不影响匹配，但旧工具链可能出问题
CSS 规范允许逗号前后存在任意空白符，h1 ,p,.title 和 h1,p,title 在现代浏览器中行为一致。但某些旧版构建工具（如 PostCSS 7.x 或老版本 cssnano）会对空格敏感，尤其当逗号后紧跟点号时（如 .btn ,.link），可能被误判为语法错误或跳过解析。
推荐做法：
- 逗号后统一加一个空格，提升可读性：.header, .nav, .footer
- 避免逗号前留空格：.header ,.nav 虽不报错，但易引发协作误解
- 不要依赖空格对齐（如 .a , .b , .c），压缩工具可能破坏格式
混淆逗号与空格是新手最常踩的语义陷阱
把 .btn, .link 误写成 .btn .link，表面只差一个字符，实际语义天壤之别：
立即学习“前端免费学习笔记（深入）”；
-
.btn, .link：匹配所有 class="btn" 的元素 或 所有 class="link" 的元素 -
.btn .link：匹配 class="btn" 元素内部、任意嵌套层级的 class="link" 元素（后代选择器）
常见现象：
- 页面上该变色的按钮没反应 → 实际写了 .btn .primary，但 DOM 中 .btn 和 .primary 是同一元素的两个 class
- 某个类名在多个地方生效，但只在特定区域起作用 → 空格被当成层级分隔符，限制了匹配范围
检查方法：在 DevTools 中右键元素 → “Inspect”，看 Styles 面板是否列出了对应规则；若没出现，大概率是逗号/空格写反了
混合类型选择器并列时，IE8 会丢弃整条规则
IE8 不支持属性选择器（如 [type="submit"]）和伪类（如 :not()）。如果在群组中混用：.btn, [type="submit"], :hover，IE8 会直接跳过整条规则，三个选择器全失效——不是只忽略后两个，而是“一损俱损”。
兼容 IE8 的安全写法：
- 把不兼容的选择器单独拆出规则：.btn { … } + [type="submit"] { … }
- 或用特征检测（如 Modernizr）动态加载补丁样式
- 现代项目中更现实的做法：确认是否真需支持 IE8；若已放弃，此限制可忽略
真正容易被忽略的是：即使你没写伪类，只要用了 input:not([type]) 这类现代语法，整个逗号组都会在 IE8 中静默失效。
