书接上文，上回书咱们讲到了 CSS 的层级选择器，它主要是基于 HTML 元素之间的三种关系来定位 HTML 元素的。所以，想要搞清楚层级选择器，首先需要搞清楚 HTML 元素之间的三种关系是怎么样的。
接下来，咱们来学习一下第四种选择器，叫做群组选择器。看到这个名字，可能你已经想到了，这种选择器就是把咱们之前已经掌握了的选择器来个整合。
群组选择器
关于群组选择器具体是怎么样来进行整合的，嗯~ 这个还真不太好解释。要不咱们还是通过一个案例来说吧！比如说现在咱们的一个 HTML 中有这样的一些元素：
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
然后，咱们要给这些元素设置相同的 CSS 样式，如果没有群组选择器的话，咱们可能需要这样来进行设置：
h1 {
color: lightcoral;
font-weight: 400;
}
h2 {
color: lightcoral;
font-weight: 400;
}
h3 {
color: lightcoral;
font-weight: 400;
}
这样的 CSS 咱们可以很清晰地看出来，h1、h2 和 h3 的样式声明块是一模一样的，但是咱们却设置了三遍。这样肯定是不好的嘛！如果用群组选择器的方式就会简单了很多：
h1, h2, h3 {
color: lightcoral;
font-weight: 400;
}
上面这种写法就叫做群组选择器了。咱们可以看到区别主要在于选择器上，由于这三个元素的样式是一样的，所以利用群组选择器设置一次就好了。
另一个群组选择器
除了上面咱们说的群组选择器之外，我还想和你说一种选择器，它也算是一种群组选择器，但从定位元素的结果上来看又不算群组选择器。
可能这么一说，你有点懵逼，咱们还是通过示例来看看具体的情况吧：
<h2>CSS 是谁</h2>
<p>CSS 人家的全名叫 Cascading Style Sheets，整了俩外国妞儿，不对，是外国妹子，刺激吧？！中文名叫层叠样式表。CSS 算是 HTML 这妹子的专业化妆师了，她主要的作用就是让 HTML 看起来更漂亮。</p>
<h2>浏览器的默认样式</h2>
<p>在没有 CSS 这妹子在 HTML 身边的话，HTML 在浏览器里面运行的样式就是浏览器自身提供的样式。说到这儿，就有个问题啦！在不同的浏览器中运行同一个 HTML 显示的样式会不会不一样呢？咱们就来试一试吧！</p>
<h2>CSS 的前世今生</h2>
<p class="text">CSS 这妹子是在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos） 当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计 CSS。也就是说，CSS 这妹子可是个 90 后哦！</p>
比如说咱们现在有个这样的 HTML，如果咱们用类型选择器可以定位到 HTML 中所有的 <p> 元素。
p {
color: lightcoral;
font-size: 12px;
}
但是呢，咱们发现在 HTML 中这三个 <p> 元素有一个是具有 class 属性的。也就是说，如果咱们想在这三个 <p> 元素中再定位到有这个 class 属性的，就可以使用这种群组选择器了：
p.text {
color: lightcoral;
font-size: 12px;
}
这样的话，咱们现在就只会定位到具有 class 属性并且值为 text 的 <p> 元素了。
之所以说这个选择器不太好说清楚，是因为在 CSS 的规范中并没有提及到这个选择器的名称。再有就是，这个选择器和上面咱们说到的群组选择器之间仅差一个逗号分隔符。所以，就放到这儿来说了，希望你能明白！