使用群组选择器可通过逗号分隔多个选择器以共享样式,如h1, p, .class, #id, [type], :hover {color: red;},支持标签、类、ID、属性及伪类组合,能减少重复代码、提升可维护性,建议注意语法完整与书写可读性。

在css中,如果你想同时选择多个不同的元素并应用相同的样式,可以使用群组选择器(也叫组合选择器)。它通过逗号(,)将多个选择器分隔开来,使它们共享同一组样式规则。
基本语法
将多个选择器用逗号分开即可:
  selector1, selector2, selector3 {
   Property: value;
 }   
例如,你想让 h1、p 和 div 都显示为红色文字:
  h1, p, div {
   color: red;
 }   
可以组合哪些类型的选择器?
群组选择器不限于标签选择器,你可以混合使用各种类型:
立即学习“前端免费学习笔记(深入)”;
示例:同时给标题、特定类和ID设置字体加粗:
  h1, .important, #main-title, [data-type=”notice”], a:hover {
   font-weight: bold;
 }   
常见用途与建议
使用群组选择器可以减少重复代码,提高CSS的可维护性。
- 把样式相似的元素归为一组,避免写多遍相同声明
 - 注意可读性:如果选择器太多,可以换行书写提升清晰度
 - 逗号是关键,漏掉会引发语法错误或只选中最后一个
 
格式优化示例:
  h1,
 p.lead,
 .sidebar .note,
 footer a:hover {
   color: #333;
 }   基本上就这些。合理使用组合选择器能让CSS更简洁高效。


