css并集选择器用英文逗号分隔多个独立选择器，每个必须完整书写、不可共享伪类或属性，权重不叠加，语义一致才宜合并，过多标签匹配影响性能。
直接用英文逗号分隔多个选择器，就能一次性给不同元素应用相同样式——这是 CSS 原生支持的语法，不是 hack，也不需要预处理器。
并集选择器的写法和常见错误
核心就是用英文逗号 , 连接多个独立选择器，每个选择器之间可加空格提升可读性，但不能用中文逗号、顿号或漏掉逗号。
- ✅ 正确：
.btn, input, select { border-radius: 4px; } - ❌ 错误：
.btn、input、select（中文顿号，解析失败） - ❌ 错误：
.btn input select（空格 → 变成后代选择器，只匹配input在.btn内、select在input内的极少数情况） - ❌ 错误：
.btn,input,select（虽多数浏览器能容错，但压缩工具或某些 CSS-in-JS 引擎可能截断）
伪类和属性选择器必须各自写全
每个被逗号分隔的单元是完整、独立的选择器。伪类、属性条件不能“共享”，否则语义就变了。
- ✅ 正确：
button:focus, input:focus, select:focus { outline: 2px solid #007bff; } - ❌ 错误：
button, input, select:focus→ 只有select响应:focus，button和input永远不生效 - ✅ 正确：
[type="text"], [type="email"], input:not([type]) { padding: 8px; } - ❌ 错误：
input[type="text"], input[type="email"], input→ 最后一个input会覆盖前面所有，且失去语义约束
权重和优先级不会叠加，但容易误判
逗号只是“批量声明”，不是“合并选择器”。.a, .b 中每个都是 class 级别，权重仍是 0,1,0，不是 0,2,0。真正影响最终样式的，是规则出现顺序 + 单个选择器权重。
- 如果后面又写了
.b { color: red; }，那.b的文字颜色就会被覆盖，但.a不受影响 - 混用 ID、标签、类时尤其要小心：
#header, div, .nav-link中，#header权重是1,0,0，其他两个是0,0,1和0,1,0，一旦冲突，ID 规则必胜 - 调试时建议用浏览器开发者工具看“Computed”面板，点开具体样式，确认哪条规则真正生效
什么时候不该硬凑逗号？
语法没错，但语义混乱会让后续维护变困难。关键看这些元素是否属于同一抽象层级的“一类东西”。
- 该用：
img[alt=""], iframe[src*="youtube"], video:not([poster]) { background: #eee; }（都是“缺失关键内容提示”的媒体） - 不该用：
h2, .card-title, .modal-header > h3—— 三者语义层级不同，未来h2要加 margin-top，.card-title要加 font-variant，就得拆开改，反而更麻烦 - 超 5 个选择器连写，建议提取公共类，比如统一加
class="reset-focus"，再写.reset-focus:focus { outline: none; }
最常被忽略的一点：逗号分隔本身不慢，但如果你把 div, span, p, li, td, th 全塞进去，浏览器就得对页面里每一个 div、每一个 span 都做一次匹配检查——这种“宽泛暴力匹配”才是真性能杀手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
