逗号分隔选择器是最轻量且兼容性最佳的方式，但需严格遵循语法规范（如.btn,.link或.btn, .link），避免逗号前空格或误用空格导致解析失败与语义错误。
直接用逗号分隔多个选择器，写成一条规则即可——这是最轻量、浏览器支持最稳的方式，不需要预处理器或 JS 干预。
逗号分隔的写法必须严格，空格不是可选的
虽然多数浏览器会容错 .btn ,.link（逗号前有空格），但 CSS 规范不保证兼容性，尤其在 PostCSS、CSS-in-JS 或旧版构建工具中容易解析失败。最稳妥的写法是紧贴逗号：.btn,.link 或 .btn, .link（逗号后带空格，更易读）。
- ✅ 推荐：
h1, h2, .title, [role="heading"] - ❌ 危险：
h1 ,h2 ,.title（逗号前空格，部分工具链报错） - ❌ 完全错误：
h1 h2 .title（空格变后代选择器，语义彻底改变）
混合类型选择器时，优先级各自独立计算
#header .title, a.btn:hover, [type="submit"] 这条规则里，三个选择器的 specificity 互不影响：第一个是 ID + class（110），第二个是 element + class + pseudo（21），第三个是 attribute（10）。后面加的规则如果 specificity 更高，就会覆盖其中某一部分，而不是整条“被替换”。
- 这意味着：
.btn, a.btn { color: blue; }和后续的a.btn { color: red; }会生效，因为后者 specificity 更高 - 别指望逗号能“平均权重”或“合并优先级”——它只是批量投递，每条匹配逻辑仍单独走一遍
什么时候该停手？别把并集选择器当万能胶
并集选择器适合「一次性统一」，不适合「渐进式定制」。一旦其中某个选择器大概率要差异化扩展，就该提前拆开。
立即学习“前端免费学习笔记（深入）”；
- ⚠️ 警惕这种写法：
.primary-btn, .secondary-btn, .danger-btn { padding: 8px 16px; border-radius: 4px; }—— 后续加font-weight: bold到 primary 时，得额外覆盖，容易漏或冲突 - ✅ 更可持续：
.btn { padding: 8px 16px; border-radius: 4px; }，再让具体类继承 - 超过 8–10 个选择器堆在一起，DevTools 里很难快速定位哪条实际生效，调试成本明显上升
真正难的不是语法，而是判断哪些元素“真的一样”——视觉一致不等于语义一致，而 CSS 的维护成本，往往从一次看似省事的逗号开始累积。
