CSS 多个选择器
在 CSS 中,可以同时应用多个选择器,来对所有选择的元素生成样式,适合用单个 CSS 选择器选择不了全部想应用样式的元素的情况下。这一小节就看一下如何同时使用多个 CSS 选择器,以及使用标签选择器与类选择器和属性选择器组合的使用方法。
多个选择器
要使用多个 CSS 选择器,可以使用 ,
来分隔多个选择器,这样所有选择器选择的元素,都会应用相同的样式,示例代码如下:
<style>
p, .link, span {
display: block;
color: hsl(214deg, 50%, 60%);
}
</style>
<div>
<p>这是一个段落</p>
<a href="#" class="link">这是一个超链接</a>
<span>测试文本</span>
</div>
预览:
代码中,选择了 p、class 为 link 的 a,以及 span 元素,并修改了它们的样式,这样就能在同一个样式块中,对不同的元素设置 CSS,不用再分别设置了,达到简化代码的目的。
这里要注意的是,逗号分隔符 ,
前后可以是任意类型的选择器,包括后面小节要讲到的。
类型选择器组合
类型选择器,可以分别和 class、id、和属性选择器进行组合,这样可以限定这些属性所属的标签,例如下方代码所示:
<style>
a.link {
color: hsl(214deg, 50%, 60%);
}
</style>
<div>
<p>这是一个段落</p>
<a href="#" class="link">这是一个超链接</a>
<span class="link">测试文本</span>
</div>