css 样式——后面覆盖前面

上代码

<div class="red yellow" style="height:200px; width: 200px;"><div>

.yellow {
    background: yellow;
}

.red {
    background: red;
}

这个区域渲染出来是什么颜色呢？红色？ 黄色？

答案是红色

不知道有多少人和我有一样的误区，一直以为是由class中的排版顺序决定同优先级样式应用顺序的。。。

实际上是谁在css文件中，权重相等，声明在后面，那么最终就应用谁

解释

W3C 上面的说明
https://www.w3.org/TR/CSS2/cascade.html#cascading-order

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

大致意思就是，如果两个选择器的声明权重相等，那么谁在后面，最后就应用谁。