并集选择器正确写法是用逗号分隔多个选择器（如 .btn, .link），逗号前后不留空格最稳妥；常见错误包括误加空格（.btn ,.link）或误用空格代替逗号（.btn .link 变成后代选择器）。
并集选择器的正确写法和常见拼写错误
并集选择器就是用逗号 , 把多个选择器连起来，让它们共享同一组样式声明。它不合并匹配逻辑，只是“或”关系——只要元素匹配其中任意一个选择器，样式就生效。
容易出错的是空格和逗号位置：.btn, .link 是合法的；.btn ,.link（逗号前有空格）虽然多数浏览器能容错，但 CSS 规范不推荐；.btn,.link（紧挨着）最稳妥。更危险的是误写成空格分隔：.btn .link 就变成后代选择器了，语义完全不同。
常见错误现象：h1, h2, h3 { margin: 0; } 生效了，但 h1 ,h2 ,h3 在某些旧版工具链里可能被解析失败，尤其搭配 PostCSS 或 CSS-in-JS 时。
什么时候该用并集选择器，什么时候不该
适合场景：视觉表现一致、语义无关的多个元素需要统一基础样式，比如重置默认间距、设置通用过渡、定义禁用态灰度等。
不适合场景：当这些元素后续需要差异化扩展时，并集选择器反而会提高维护成本。例如：.primary-btn, .secondary-btn, .danger-btn { padding: 8px 16px; border-radius: 4px; } 看似省事，但一旦某类按钮要加 font-weight: bold，你就得单独再写一条规则覆盖，容易遗漏或冲突。
更可持续的做法是提取公共类：.btn { padding: 8px 16px; border-radius: 4px; }，再让具体按钮继承：.primary-btn 只负责颜色和边框差异。
- 并集选择器适合「一次性统一」，不适合「渐进式定制」
- 如果三个选择器中有一个将来大概率要独立调整，就别合写
- 层级越深的选择器（如
article h2, section h2）越容易因 DOM 结构变动而失效，不如用类名控制
并集选择器对 specificity 的影响
逗号分隔不会改变每个选择器自身的权重。例如：#header .title, .nav-link:hover 中，左边是 id + class（权重 110），右边是 class + pseudo-class（权重 11），两者独立计算，各自与后续规则竞争。不是取平均值，也不是相加。
这意味着：如果你写了 .btn, a.btn { color: blue; }，后面又写 a.btn { color: red; }，后者会生效，因为两个规则都命中 a.btn，而后者更具体（多了一个元素标签）。
性能上没有明显差异，但过长的并集列表（超过 10 个选择器）会让 DevTools 难以定位哪条规则实际生效，调试变慢。
和 BEM、CSS Modules 等现代方案的协作方式
在 BEM 命名下，并集选择器通常只用于修饰符共用样式，比如：.button--small, .input--small { font-size: 12px; }。这时它本质是“跨组件复用”，而非“跨语义复用”。
在 CSS Modules 中，由于类名自动哈希化，styles.btn 和 styles.link 编译后是不同字符串，无法直接用并集选择器合并——你得靠 JS 层把多个 className 拼在一起传给组件，或者用 :global() 包裹，但会破坏局部作用域。
真正减少重复的现代做法，是把并集逻辑交给预处理器（如 Sass 的 @extend）或 CSS 自定义属性（--spacing-xs: 4px;），而不是靠逗号硬连。
复杂点在于：并集选择器看起来省代码，但它的复用边界模糊，容易把样式耦合到选择器结构上，而不是设计系统抽象层上。一旦设计语言升级，改一处就得全局扫一遍逗号列表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
