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.

大致意思就是，如果兩個選擇器的聲明權重相等，那么誰在后面，最后就應用誰。