多个CSS选择器用英文逗号分隔构成并集选择器，浏览器分别匹配各选择器，任一成功即应用声明；需注意其与复合选择器（如.a.b）的本质区别——前者是“或”关系，后者是“且”关系。
多个 CSS 选择器如何同时匹配同一个元素
直接写逗号分隔，就能让多条规则同时作用于同一组元素。这不是“合并选择器”，而是「并集选择器」——浏览器会分别判断每个选择器是否匹配，只要任一匹配，整条声明块就生效。
常见错误是误以为 .a.b 和 .a, .b 效果类似，其实前者要求元素**同时具备两个 class**，后者是**任意一个 class 匹配即可**。
-
.header, .footer：匹配所有 class 为header或footer的元素 -
div, p, .highlight：匹配所有div、所有p、以及所有带highlightclass 的元素（类型不限） - 逗号必须是英文半角，后面建议加空格提高可读性，如
h1, h2, h3 - 逗号不能跨行省略空格（某些旧版构建工具可能出错），稳妥写法始终带空格
为什么写了多个选择器但样式没叠加？
样式不叠加，通常不是选择器写法问题，而是 CSS 层叠（cascade）和特异性（specificity）在起作用。即使多个选择器都匹配了同一个元素，最终生效的只是特异性最高、或位置靠后且特异性相等的那条声明。
- 比如
div.red（特异性 0,1,1）比.red（0,1,0）优先级高，后者会被前者覆盖 -
#nav .item和.menu li可能同时匹配某个li，但前者的特异性更高，它的color会胜出 - 用浏览器开发者工具的「Computed」面板看实际生效值，「Styles」面板里被划掉的声明就是被覆盖的
复合选择器 vs 逗号分隔选择器的区别
这是最容易混淆的点：.btn.primary 是单个选择器（要求同时含两个 class），.btn, .primary 是两个独立选择器（满足其一即可）。它们语义完全不同，不能互换。
立即学习“前端免费学习笔记（深入）”；
-
input[type="text"].invalid：只匹配 type 为 text 且 有 invalid class 的 input -
input[type="text"], .invalid：匹配所有 text 类型 input 或 所有 invalid class 元素（可能是 div、span 等） - 组合越复杂，特异性越高，也越难复用。过度使用
div#main ul li a:hover这类长链，反而会让后续覆盖变得困难
实际项目中推荐怎么组织多选择器规则
优先考虑可维护性，而不是“省一行代码”。多数情况下，拆成多条独立规则更清晰；仅当逻辑强相关、且未来一定同步修改时，才用逗号合并。
- 按钮状态统一控制：
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } - 避免把语义无关的选择器硬凑一起，比如
h1, .card-title, [data-role="title"]—— 后续改h1字体时，很可能不想动另外两个 - 用 CSS 自定义属性（
--color-primary）替代重复声明，比靠选择器合并更可持续 - 构建工具（如 PostCSS）支持
merge-longhand等插件，但手动合并仍需谨慎：机器合并不理解业务语义
