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

我正在做一个实验......这个实验有两个 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 应该是绿色。有人可以解释一下吗？

标签： htmlcss

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

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