Question

我正在做一个实验...该实验有两个div，每个div具有相同的两个类，但是它们的位置互换了。根据一般的CSS规则，css效果仅适用于最后一个用户定义的类。

所以这是我的代码：

.green {
  background: green;
  height: 20px;
}

.red {
  background: red;
  height: 20px;
}

<div class="green red"></div>
<br>
<div class="red green"></div>

所以按照规则...在第一个div中，.red类应占主导地位，在第二个div中，.green类应占主导地位... 但是当我运行代码时，两个div都是红色的。其中第一个div应该为红色，第二个div应该为绿色。有人可以解释吗？

Answer 1

根据W3C设置的规范，类的顺序不影响优先级。如果两个规则为同一元素定义了相同的属性，则最后定义的规则适用。

在您的示例中，background:red在background:green之后，因此background:red优先。