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 元素。