css加載順序

最近發現個有意思的事情,印象中的是css中class后面會覆蓋前面的,

於是寫了代碼

        div{
            width: 100px;
            height: 100px;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }

<div class="yellow red "></div>

發現仍然為黃色,於是把css的順序換了下

        div{
            width: 100px;
            height: 100px;
        }
        .yellow{
            background-color: yellow;
        }
        .red{
            background-color: red;
        }

    <div class="red yellow "></div>

即使把class的順序調換,顏色也仍為紅色,

由此可見:css的樣式類在瀏覽器加載css文件是覆蓋就已經完成,而不是在讀取html樣式類時才進行覆蓋

原文地址:https://www.cnblogs.com/ones/p/9230423.html