为什么 div 的背景颜色不能按照一般 CSS 规则工作？

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优先。

有关详细信息，请参阅项目上列出的类顺序是否会影响 CSS？