群组选择器用英文逗号连接多个选择器以共用样式规则，提升代码简洁性与可维护性；支持混搭标签名、class、id及通配符等，每个选择器独立匹配，但任一错误会导致整条规则失效或部分失效。
群组选择器就是用逗号把多个选择器连起来，让它们共用同一套样式规则。不用重复写相同的样式，代码更干净，维护也方便。
怎么写群组选择器
语法很简单：在
- 比如：h1, h2, p { font-size: 16px; margin: 0; }
- 这行代码会让所有
<h1>、<h2>和<p>元素都用16px字号、无外边距 - 逗号前后加空格可读性更好，但不是必须的
可以混搭不同类型的选择器
群组里不只能放标签名，id、class、甚至通配符都能一起用。
- #header, .nav-link, footer { color: #333; }
- 上面这句同时作用于id为header的元素、所有class含nav-link的元素、以及所有footer标签
- 注意：每个选择器是独立匹配的，不是“必须同时满足”，而是“满足任意一个就生效”
常见实用场景
群组选择器特别适合统一基础样式，避免到处复制粘贴。
立即学习“前端免费学习笔记（深入）”；
- 重置默认间距：h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
- 统一链接颜色：a, .btn, [role="link"] { color: #007bff; text-decoration: none; }
- 设置字体家族：body, button, input, select, textarea { font-family: "Segoe UI", sans-serif; }
要注意的细节
写的时候顺手，但容易忽略几个关键点。
- 任意一个选择器写错（比如拼错标签名或漏掉点、井号），整条规则可能失效或部分失效
- 不要为了省事堆太多选择器，超过5–6个会降低可读性，建议拆分成逻辑清晰的小组
- 它不改变选择器优先级——#id还是比.class优先级高，即使它们在同一个群组里
