CSS中多个选择器用英文逗号分隔表示并集，逗号前后不应有空格；中文逗号、顿号或漏逗号会导致语法错误或选择器失效；空格分隔则表示后代关系，二者本质不同。
多个选择器用逗号分隔时的书写格式
CSS 中多个选择器想共用同一套样式，必须用英文逗号 , 分隔，且逗号前后**不能有空格干扰解析**（虽然多数浏览器容忍空格，但 CSS 规范不保证，尤其在某些构建工具或压缩器中可能出错）。
常见错误是把逗号写成顿号、中文逗号，或漏掉逗号直接换行——这会导致后一个选择器完全失效，浏览器只识别第一个。
-
.header, .footer, .sidebar { margin: 0; padding: 1rem; }✅ 正确 -
.header .footer .sidebar { ... }❌ 这是后代选择器，不是多选器 -
.header、.footer、.sidebar { ... }❌ 中文顿号，语法错误 -
.header,.footer,.sidebar { ... }✅ 可用，但建议加空格提升可读性
逗号分隔与空格分隔的本质区别
逗号是「并集」，空格是「后代关系」——这是初学者最常混淆的点。比如 nav a, .btn 表示「nav 内部的 a 元素」和「所有 class 为 btn 的元素」；而 nav a .btn 表示「nav 内部某个 a 元素内部、再嵌套的 .btn 元素」。
性能上，并集选择器本身不慢，但若其中某个选择器过于宽泛（如 div, span, p），会强制浏览器对所有这类标签做匹配检查，影响渲染效率。
立即学习“前端免费学习笔记（深入）”；
- 避免写
* , .class——通配符加逗号会放大性能问题 - 不要为了“省代码”把语义无关的选择器硬凑一起，比如
h1, input, .loading-spinner，维护时难以定位 - 构建工具（如 PostCSS）可能对长逗号列表做拆分或提取，需留意输出结果是否符合预期
伪类、属性选择器混用时的逗号注意事项
伪类（如 :hover）、属性选择器（如 [disabled]）可以和其他选择器自由组合，但逗号必须严格分隔完整的选择器单元。
错误写法：button:hover, input:focus, [required] 是合法的；但 button:hover, input:focus[required] 中，input:focus[required] 是一个独立选择器（表示同时满足 focus 和 required 属性的 input），不是两个分开的条件。
-
a:hover, a:visited, a:active✅ 常见链接状态合并 -
[type="text"], [type="email"], input:not([type])✅ 覆盖无 type 的默认文本框 -
.card:hover .title, .card.active .title✅ 两个复合选择器并列，注意空格仍在各自单元内
预处理器（Sass/Less）里逗号的行为差异
Sass 的嵌套语法中，& 生成父选择器，但逗号不会自动继承嵌套上下文。比如：
.container {
&__header,
&__footer {
padding: 1rem;
}
}编译后是 .container__header, .container__footer，没问题；但如果你写：
.container {
&__header, .standalone {
color: red;
}
}结果是 .container__header, .standalone ——.standalone 不会加上 .container 前缀。这点容易被忽略，调试时发现样式没生效，往往是因为这个“半截子”选择器脱离了预期作用域。
Less 同理，& 只作用于它所在的逗号单元，不跨逗号传播。
