分组选择器是用逗号分隔多个选择器以统一应用相同样式的css语法，支持标签、类、ID、属性及伪类等混合组合，可提升可维护性与代码简洁性，但不改变各选择器优先级。

用逗号分隔多个选择器，就能一次性给不同元素应用相同样式——这就是 CSS 的分组选择器（Grouping Selector）。

什么是分组选择器

分组选择器允许你把多个选择器写在一起，用英文逗号 , 隔开，然后统一声明样式规则。浏览器会分别匹配每个选择器，并对所有匹配到的元素应用相同样式。

• 写法示例：h1, h2, p { color: #333; font-family: sans-serif; }
• 效果：所有
  

  、

  和

  元素都会变成深灰色文字、无衬线字体

• 注意：逗号前后可有空格，但不能省略逗号，否则就变成后代/子元素选择器了

常见实用组合方式

分组不局限于标签名，也可以混合使用类、ID、属性等选择器：

• 标签 + 类：button, .btn, [type="submit"] { padding: 8px 16px; border-radius: 4px; }
• 多个类：.header-title, .section-title, .card-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
• 伪类一起写：a:hover, button:hover, .nav-link:hover { opacity: 0.8; }

为什么推荐用分组而不是重复写

避免样式重复，提升可维护性：

立即学习“前端免费学习笔记（深入）”；

• 修改颜色或间距时，只需改一处，所有相关元素同步更新
• 减少 CSS 文件体积，尤其在多个元素共享基础样式（如重置 margin/padding、统一字体）时效果明显
• 逻辑更清晰：一眼看出哪些元素被赋予了“同类待遇”

需要注意的坑

分组选择器看起来简单，但容易误用：

• 优先级不会叠加：例如 div, .active 中，.active 的优先级仍是 10，不是 10+1；分组不影响单个选择器的权重
• 不要强行凑数：如果 5 个元素只在某一个属性上相同（比如都加了 cursor: pointer），却为这点共性写一长串分组，反而降低可读性——此时建议单独写或用工具类
• 嵌套预处理器中慎用：sass/less 支持嵌套，但分组写在嵌套块里可能生成冗余代码，建议先分组再嵌套，或用占位符 %extend