多class应用同一个元素时前后声明的class规则将会怎样

当一个元素应用多个 class 时，前后声明的 class 规则将会按照声明的顺序依次应用到该元素上。如果多个 class 中存在相同的属性，后声明的 class 中的属性将会覆盖前面声明的 class 中的属性。下面是两个示例说明：

示例一：前后声明的 class 规则

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

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

.box1 {
  background-color: #ccc;
}

上述代码中，我们将 .box 和 .box1 两个 class 应用到了同一个 div 元素上。由于 .box 的声明在 .box1 的声明之前，因此 .box 中的属性将会先被应用到该元素上。然后，.box1 中的属性将会覆盖 .box 中的 background-color 属性，使该元素的背景颜色变为 #ccc。

示例二：前后声明的 class 规则

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

.box1 {
  background-color: #ccc;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

上述代码中，我们将 .box 和 .box1 两个 class 应用到了同一个 div 元素上。由于 .box1 的声明在 .box 的声明之前，因此 .box1 中的属性将会先被应用到该元素上。然后，.box 中的属性将会覆盖 .box1 中的 background-color 属性，使该元素的背景颜色变为 #ddd。