CSS群组选择器用逗号分隔多个选择器，使相同样式规则一次性应用到多个元素；它支持统一设置按钮、语义标签、表单禁用态等场景，但需注意逗号表示“或”关系、优先级独立计算、避免过度堆砌及兼顾语义化。
用逗号分隔多个选择器，就能让相同样式规则一次性应用到多个元素上，这就是 CSS 群组选择器（Grouping Selector）的核心用法。
什么是群组选择器
群组选择器允许你把多个选择器写在一条声明前，用英文逗号
,
隔开。
浏览器
会分别匹配每个选择器，并将后面的大括号内样式统一应用到所有匹配的元素上。
比如想让页面中几个不同位置的标题都用同一套字体和颜色：
这样比单独写三条规则更简洁，也更容易维护。
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
常见适用场景
以下情况特别适合用群组选择器统一设置：
多个同类功能按钮（如
、
、
）共用边框、圆角、光标样式
不同语义标签但需视觉一致（如
、
、
都加粗+橙色背景）
表单控件统一禁用态（
、
、
）
响应式中多类容器共享断点内边距（
、
、
）
使用时要注意什么
群组选择器看起来简单，但容易因理解偏差导致意外覆盖：
逗号是“或”的关系，不是“和”，
表示「div 内的 p」或「任意 span」，不是「既是 div 又是 p 又是 span 的元素」
优先级按每个独立选择器计算，
中
的高优先级不会“传染”给
避免过度堆砌，超过 5–6 个选择器时建议拆分，兼顾可读性与复用性
不要用群组替代语义化结构，比如把
全设成相同字号，可能损害文档大纲和可访问性
配合其他技巧效果更好
群组选择器常和以下方式组合使用：
和
属性选择器
搭配：例如
统一输入框基础样式
和伪类连用：如
设置统一悬停反馈
嵌套预
处理器
（如 Sass）中，可用
简写生成群组，减少重复书写
结合 CSS 自定义属性，先定义
，再在群组规则中统一引用，便于全局换肤
h1, .section-title, #main-header {
font-family: "Segoe UI", sans-serif;
color: #2c3e50;
margin-bottom: 1rem;
}.btn-primary.btn-secondary[type="submit"]strongb.highlightinput:disabledselect:disabledtextarea:disabled.container.wrapper.layoutdiv p, span.class1, #id1#id1.class1h2, h3, h4input[type="text"], input[type="email"], textareaa:hover, button:hover, .nav-link:hover&--text-primary: #333