书接上文,上回书咱们讲到了 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 的规范中并没有提及到这个选择器的名称。再有就是,这个选择器和上面咱们说到的群组选择器之间仅差一个逗号分隔符。所以,就放到这儿来说了,希望你能明白!