CSS中逗号分隔选择器是规范语法，表示并列声明而非合并选择器，各选择器独立匹配、权重不叠加，使用时应基于语义一致性而非外观相似性判断。
多个CSS选择器共用样式时，用逗号分隔是唯一标准写法
直接写成 .a, .b, .c { color: red; } 就行，浏览器会把逗号前后的选择器全部匹配并应用相同样式。这不是“技巧”，而是 CSS 规范本身定义的语法，所有现代浏览器都支持，不存在兼容性问题。
逗号分隔不是“合并选择器”，而是“并列声明”
常见误解是以为 .a, .b 会生成一个新选择器，其实它只是告诉浏览器：“对所有匹配 .a 的元素，以及所有匹配 .b 的元素，都应用这些声明”。两者完全独立，权重也不叠加 —— 每个选择器单独计算优先级。
- 错误写法：
.a, .b { font-size: 14px; } .b { color: blue; }→.b的颜色会被后声明覆盖，但字体大小不会因此“增强” - 权重不变：
.a, .b中每个选择器都是 class 级别，权重仍是 0,1,0，不是 0,2,0 - 空格和换行不影响解析：
.a,\n.b,\n.c和.a,.b,.c完全等价
容易踩坑的几个点
实际写的时候，最容易出问题的地方不在语法本身，而在语义混淆和维护成本：
- 误把逗号当“逻辑或”来组织业务逻辑：比如写
[data-status="pending"], [data-status="processing"]是合理的；但写成.btn-primary, .btn-secondary, .btn-danger却又在后面单独覆盖.btn-danger { background: red; }，会导致样式散落、难以追踪 - 嵌套预处理器（如 Sass）里误用逗号：Sass 的
@extend或%placeholder才是真合并，而原生 CSS 里逗号永远不产生新选择器 - 选择器过长+逗号滥用：像
header nav ul li a, footer nav ul li a看似省代码，实则增加渲染开销，且一旦导航结构变化，两处都要改 - 伪类/伪元素混用易漏括号：
a:hover, a:active, a:focus没问题；但写成a:hover, a:active:focus就只匹配同时满足 active 和 focus 的 a 元素，不是本意
什么时候该用逗号，什么时候不该用
核心判断标准就一条：这些元素是否在**同一层语义意图下需要一致表现**。不是“看起来一样”，而是“应该被当成同一类对待”。
立即学习“前端免费学习笔记（深入）”；
- 该用：表单控件禁用态统一灰掉 ——
input:disabled, select:disabled, button:disabled { opacity: 0.6; } - 该用：一组图标字体统一尺寸 ——
.icon-home, .icon-user, .icon-settings { font-size: 18px; } - 不该用：只是碰巧现在颜色相同，但语义不同（比如标题和链接）——
h2, a { color: #333; }很危险，后续 h2 要加粗、a 要加下划线，就会互相干扰 - 不该用：跨组件边界强行复用 ——
.card-title, .modal-title, .tooltip-title听起来像一类，但实际它们属于不同组件体系，改一个可能破坏另一个的视觉节奏
