[分享]css两个类在一起

在CSS中，我们经常会想要同时应用多个类。这可以通过在元素的class属性中列出多个类名来实现。 在上面的例子中，div元素应用了两个类名："box"和"red"...

在CSS中，我们经常会想要同时应用多个类。这可以通过在元素的class属性中列出多个类名来实现。

<div class="box red"></div> 

在上面的例子中，div元素应用了两个类名："box"和"red"。这意味着该元素将同时应用这两个类中所定义的样式。

注意，类名之间需要用空格隔开。如果没有空格，它们将被解析为一个单独的类名。

<div class="boxred"></div>    //会被解析为一个单独的类名"boxred" 

同时应用多个类十分方便，因为它们允许我们使用通用类和专业类。通用类是通常被多个元素使用的类，而专业类是只适用于一小部分元素的类。

下面是一个示例，使用通用类 .box 来定义所有盒子的基本样式，并使用专业类 .red 仅为红盒子定义红色背景。

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

.red {
  background-color: red;
}

<div class="box"></div>
<div class="box red"></div>
<div class="box"></div> 

在上面的代码中，第一个和第三个盒子应用了基本类 .box，它们将不会有任何背景颜色。而第二个盒子同时应用了专业类 .red 和 .box，它将显示为一个红色背景的盒子。