[分享]css两个class控制

在 CSS 中，可以使用多个 Class 来控制一个元素的样式。

例如，HTML 代码如下：
<div class="box small red"></div>
CSS 代码如下：
.box {
  width: 100px;
  height: 100px;
}
.small {
  font-size: 12px;
}
.red {
  background-color: red;
} 

上述代码中，一个 <div> 元素拥有三个 Class：box、small 和 red。其中，box Class 负责设置元素的基本样式，包括宽度和高度。Small Class 对字体大小进行设置，使得元素中的所有文本都显示为 12px。Red Class 使元素的背景颜色为红色。

可以使用多个 Class 来同时控制一个元素的多个样式。这种做法不仅方便，还能够减少重复的代码。同时，还可以在不同的元素中重用这些 Class。

为了避免 Class 名称重复，应该使用有意义的和语义化的 Class 名称，例如 small、red 等，而不是像 foo、bar 等无意义的名称。

例如，可以使用以下代码来定义一些常见的 Class：
.small {
  font-size: 12px;
}
.medium {
  font-size: 16px;
}
.large {
  font-size: 20px;
}
.red {
  background-color: red;
  color: white;
}
.blue {
  background-color: blue;
  color: white;
}
.green {
  background-color: green;
  color: white;
} 

这样，就可以通过简单地添加一个或多个 Class 来快速实现不同的样式组合。

总之，在 CSS 中使用多个 Class 来控制元素的样式，有助于提高代码的复用性，减少代码的冗余，并且可以让代码更加领域特定和易于维护。