将两个 CSS 类应用于单个元素

在 CSS 中，我们可以使用一个类（class）来给元素设置样式。但是如果我们想要应用多个类呢？下面是几种方法：

方法一：空格分隔

在 HTML 标签中，我们可以将两个类名以空格分隔，在 CSS 中使用选择器分别设置样式。例如：

<div class="class1 class2">Hello World</div>

.class1 {
  background-color: red;
}
.class2 {
  color: white;
}

这样，.class1 和 .class2 类的样式都会应用于 <div> 元素。

方法二：逗号连结

在 CSS 中，我们可以使用逗号将两个选择器连结在一起，并为它们设置相同的样式。例如：

<div class="class1 class2">Hello World</div>

.class1,
.class2 {
  background-color: red;
  color: white;
}

这样，.class1 和 .class2 类的样式都会应用于 <div> 元素。

方法三：嵌套选择器

在 Sass 或者 Less 中，我们可以使用嵌套选择器将两个类组合在一起，并为它们设置相同的样式。例如：

<div class="wrapper">
  <div class="class1 class2">Hello World</div>
</div>

.wrapper {
  .class1,
  .class2 {
    background-color: red;
    color: white;
  }
}

这样，.class1 和 .class2 类的样式都会应用于 <div class="class1 class2">Hello World</div> 元素。

以上三种方法都可以将多个 CSS 类应用于单个元素。你可以根据具体情况选择最适合自己的方法。