分组选择器是用逗号分隔多个选择器以统一应用相同样式的CSS语法，支持标签、类、ID、属性及伪类等混合组合，可提升可维护性与代码简洁性，但不改变各选择器优先级。
用逗号分隔多个选择器，就能一次性给不同元素应用相同样式——这就是 CSS 的分组选择器（Grouping Selector）。
什么是分组选择器
分组选择器允许你把多个选择器写在一起，用英文逗号 , 隔开，然后统一声明样式规则。浏览器会分别匹配每个选择器，并对所有匹配到的元素应用相同样式。
- 写法示例：
h1, h2, p { color: #333; font-family: sans-serif; } - 效果：所有
<h1>、<h2>和<p>元素都会变成深灰色文字、无衬线字体 - 注意：逗号前后可有空格，但不能省略逗号，否则就变成后代/子元素选择器了
常见实用组合方式
分组不局限于标签名，也可以混合使用类、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、统一字体）时效果明显
- 逻辑更清晰：一眼看出哪些元素被赋予了“同类待遇”
需要注意的坑
分组选择器看起来简单，但容易误用：
