为什么 div 的背景颜色不能按照一般的 css 规则工作？ [复制]

Question

我正在做一个实验......这个实验有两个 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 优先。

更多信息请参考Does the order of classes listed on an item affect the CSS?。