并集选择器用逗号分隔多个选择器，表示“或”关系，匹配任一即应用样式；各选择器独立解析、权重单独计算，伪类伪元素需各自完整书写，超5个建议提取公共类。
用逗号分隔多个选择器时，样式会统一应用
CSS 的并集选择器（comma-separated selectors）本质是“或”关系：只要匹配其中任意一个，就应用该规则。它不是给不同元素“分别写一遍样式”，而是用一条声明批量覆盖——这是最直接、最轻量的复用方式。
- 常见错误现象：
.btn .icon写成.btn, .icon却忘了加空格，结果变成“.btn或.icon”，而非“.btn下的.icon” - 使用场景：按钮、输入框、下拉菜单等控件都需要统一的
border-radius或outline重置 - 参数差异：每个选择器独立解析，不共享伪类或层级上下文。比如
input:focus, button:focus有效，但input, button:focus只会让button响应:focus - 性能影响：几乎可忽略。浏览器对并集选择器的解析开销极低，远小于嵌套过深或通配符选择器
示例：
.header,
.nav-link,
.cta-button {
color: #333;
font-weight: 600;
}
并集选择器里混用标签、类、ID 时要注意优先级
逗号本身不改变优先级，但每个选择器单独计算权重。混写容易误判哪条规则最终生效。
- 常见错误现象：写成
div, .container, #main，以为都一样；实际#main权重最高，若其他地方有冲突规则，div和.container的样式可能被覆盖 - 使用场景：需要对某几个关键节点做快速视觉对齐（如统一
margin-bottom），又不想新建 class - 建议：尽量保持同类型选择器组合，比如全用类名
.title, .subtitle, .caption；若必须混用，用!important要格外谨慎 - 兼容性影响：所有现代浏览器支持良好，IE8+ 也完全支持
伪元素和伪类在并集选择器中必须各自完整书写
不能省略冒号或拆开写。每个分支都要是语法完整的 CSS 选择器。
- 常见错误现象：
a:hover, span::before是合法的；但a:hover, ::before无效，因为::before没绑定到具体元素 - 使用场景：统一处理链接悬停和图标生成内容的颜色、过渡效果
- 注意点：伪元素（
::before/::after）必须依附于某个真实元素，不能单独出现在逗号后 - 示例：
a:hover,
button:hover,
input:focus {
box-shadow: 0 0 0 2px rgba(0, 100, 255, 0.3);
}
多个并集选择器叠加时，阅读和维护成本会上升
超过 4–5 个选择器连写，人眼识别效率明显下降，调试时也难定位是哪个分支出了问题。
- 常见错误现象：写了一长串
.form-input, .search-input, .filter-input, .date-input, .number-input，后来新增.time-input忘了加，导致样式不一致 - 替代方案：当元素语义相近，优先提取公共类，比如统一加
class="text-field"，再用.text-field控制基础样式 - 折中做法：用注释分组，但不要依赖注释来“解释逻辑”，而要靠结构本身清晰
- 真正容易被忽略的是：并集选择器不会自动继承后续新增的同类元素——它只作用于当前 HTML 中已存在的匹配项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
