css类选择器怎么用-CSS 多重选择器

CSS 多重选择器

在 CSS 中，您可以同时应用多个选择器来为所有选定元素生成样式。 这适用于单个 CSS 选择器无法选择要应用样式的所有元素的情况。 本节将介绍如何同时使用多个 CSS 选择器，以及如何组合使用标签选择器、类选择器和属性选择器。

多个选择器

要使用多个CSS选择器，可以使用 , 分隔多个选择器，这样所有选择器选中的元素都会应用相同的样式，示例代码如下：

<style><span class="token style language-css">
  p, .link, span {
    display: block;
    color: hsl(214deg, 50%, 60%);
  }
</style>
<div>
  <p>这是一个段落</p>
  <a href="#" class="link">这是一个超链接</a>
  <span>测试文本</span>
</div>

预览：

代码中选择link类的p、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代码中，有两个元素的类是link，a和span，但是在CSS中，我们选择了a元素，这里我们只需要在类名前添加标签名，不要有任何字符或空格之间。 如果是id和属性选择器，也是类似的。 示例代码如下：

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

多个班级

某些 HTML 元素可能有多个类。 这时css类选择器怎么用，如果要选择同时存在多个类的元素，可以直接使用.className1.className2的方法来选择。 类选择器之间不能有任何字符或字符。 空间，示例代码如下：

<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”类的元素。 如果限制div元素css类选择器怎么用，也可以使用div.box.border。

概括

CSS多重选择器可以选择多个不同的元素，统一应用样式，减少重复代码，使用和分离选择器，注意不要省略，否则会成为子元素选择器。

CSS 选择器也可以组合。 例如，标签选择器可以与类、id 和属性选择器结合使用，以将它们限制为某个 HTML 元素。 您还可以选择多个类属性中的任意一个来选择同时出现这些类的 HTML 元素。