逗号分隔的选择器匹配满足其中任意一个子选择器的元素，是逻辑“或”关系；浏览器分别处理各子选择器后合并去重，不产生交集或层级关联。
逗号分隔的选择器到底匹配什么
逗号分隔的选择器（如 .btn, .link, [data-role="menu"]）不是“同时满足多个条件”，而是“满足其中任意一个”。浏览器会分别处理每个子选择器，再把所有匹配的元素合并去重后返回。它本质上是逻辑“或”关系，不是组合筛选。
常见误用：以为能跨标签类型加约束
比如写 div.header, p.content 是合法的，但有人误以为这能选出“既是 div 又有 header 类，且是 p 且有 content 类”的元素——不可能。逗号两侧完全独立，不会产生交集或层级关联。
- 错误预期：
input[type="text"], .form-control被当成“type=text 的 input 且带 form-control 类” → 实际是“所有 text 类型 input”加上“所有带 form-control 类的任意元素” - 真正需要交集时，应去掉逗号，写成
input[type="text"].form-control - 需要父子关系？用空格：
.nav a；需要紧邻兄弟？用+：h2 + p
性能与可维护性容易被忽略的点
逗号选择器本身不慢，但容易诱使写出低效组合。例如 div#main ul li a, .sidebar nav a, footer a 看似清晰，实则让浏览器反复遍历 DOM 多次。更糟的是，如果某一项选择器过于宽泛（如 * 或 div），整组都会拖慢。
