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.

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