css分组选择器的定义方式是怎么样的？

css分组选择器的定义方式是怎么样的？分组选择器选取所有具有相同样式定义的 HTML 元素，用英文小写逗号的 , 来分隔每个选择器，举例如下：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

已上代码分别给元素h1、h2、p都设置了相同的两个样式定义：第一个是属性text-align（水平对齐方式），对应的值center（居中）；第二个是属性color（颜色），对应的值red（红色）。

这个时候，网友们最好是对选择器进行分组，以最大程度地缩减代码，写法也很简单，用英文小写逗号的 , 来分隔每个选择器即可：

h1, h2, p {
  text-align: center;
  color: red;
}

css分组选择器的定义方式可以将任意多个选择器分组在一起，对此没有任何限制。

可能有些网友就会问了：范如乐，你上面举例的是相同的样式，如果不同的元素之间定义的样式有一部分相同，而有一部分又不同应该怎么分组呢？

范如乐：原理是一样的，把相同的那部分样式分别进行分组即可，举例如下：

h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}

分组后如下：

h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}

当然也可以这样分：

h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

主要是看你分组的时候，取的是哪部分相同的属性和值，上面3组样式的显示效果都是一样的。