跳到主要内容位置

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>

预览:

这里 HTML 代码中,有两个 class 为 link 的元素,a 和 span,但是在 CSS 中, 我们选择了 a 元素,这里直接在 class 名称前加上标签名即可,中间不要有任何字符或空格。如果是 id 和属性选择器,也是类似的,示例代码如下:

a[href="#"], p#someId {  /* css 代码 */}

多个 class#

有的 HTML 元素可能会设置多个 class,这个时候,如果要选择其中几个 class 同时存在的元素,那么可以直接使用 .className1.className2 的形式来选择,class 选择器之间不能有任何字符或空格,示例代码如下:

<style>  .box.border {    width: 50px;    height: 50px;    background-color: hsl(214deg, 50%, 60%);    border: 1px solid #000000;  }</style><div>  <div class="box border" /></div>

预览:

这里的 CSS 选择了同时包含 "box" 和 "border" class 的元素,如果限定 div 元素,那么也可以使用 div.box.border 这种形式。

小结#

CSS 多个选择器可以选择多个不同的元素,给它们统一应用样式,减少重复的代码,选择器之间使用 , 分隔,注意不要漏写,否则会成为子元素选择器。

CSS 的选择器之间也可以进行组合,例如标签选择器可以和 class、id 及属性选择器结合,限定于某个 HTML 元素。多个 class 属性也可以选择其中任意的几个,以选择同时有这几个 class 出现的 HTML 元素。