關於css樣式加載的問題

今天我在學習jQuery的addClass操做時遇到了一個小問題，想來跟你們分享一下，避免初學者踩坑。

個人需求是製做一個表格，並讓它隔行換色，在此基礎上再加上鼠標懸浮變色的效果。（主要訓練jQuery選擇器和addClass）

可是在我真正操做後發現個人奇數行都變色了，而偶數行都沒有變。具體效果以下：

原效果：

咱們能夠看到首行爲一種顏色，奇數行無顏色，偶數行設置了背景顏色

鼠標懸浮在第一行的效果：

這裏能夠觀察到「梅西」一行變換了顏色

 鼠標懸浮在第二行的效果：

到了這裏就發生了異常，整個表格竟然沒有發生變化

接下來我將放上個人源代碼，你們能夠先觀察一下是哪裏出現了錯誤。

jQuery相關源碼：

 

<script type="text/javascript">
    $(function(){
        //全選全不選
            $("#thch").click(function(){
                var ch = $("#thch").prop("checked");
                    $("#tabl td input").prop("checked",ch);
                })
                
                //表格隔行換色
                $("table tr:gt(0):odd").addClass("even")
                
                //鼠標懸浮變色
                $("table tr:gt(0)").mouseover(function(){
                    $(this).addClass("mv")
                })
                $("table tr:gt(0)").mouseleave(function(){
                    $(this).removeClass("mv")
                })
                
                $("table tr:gt(0)").click(function(){
                    var self = $(this)
                    var a = $("this input").prop("checked")
                })
            })
</script>

 

 css相關代碼：

#tabl{
    width: 600px;
    height: 200px;
    margin-top: 200px;
    text-align: center;
    
}

.tr1{
    background-color: cornflowerblue;
    color: white;
}

.mv{
    background-color: rosybrown;
}

.even{
    background-color: antiquewhite;
}

因爲我表格給奇數行先添加了一個even的css樣式，在處罰鼠標懸浮事件後的添加的mv的css樣式並無生效，因此當時我首先想到的是addClass這個方法是否在添加過一次css樣式後，再次添加時只在第一次添加的樣式後邊尋找，因爲個人.even是寫在.mv後的，因此沒有找到。

爲了測試個人上述所想，我便進行了測試，在.mv中添加一個font-size的屬性，測試是否生效，測試結果以下：

能夠清楚的看到字體變大了，然而顏色依舊沒有變。

這就讓我感到了更加困惑，問了一些同窗也沒有獲得我想要的答案，因爲天色已晚，我也沒有什麼思路，就暫時放下了這道題。次日一早我在吃飯時忽然想到是否與css的加載順序有關，便匆忙的趕去驗證個人想法。

我將.mv與.even互換了位置，效果以下：

此次終於對了！！！

在改對以後我便仔細去查了一下addClass的原理，它並非將標籤上原本就有的css樣式覆蓋，而是添加css，因此它也遵循css樣式的加載順序，一開始時.mv在.even的前邊，因此要加載後邊的樣式，然然後邊的樣式仍是.even，因此沒有變換，將他們兩個互換順序後就能夠看到變換了。

總結：

在使用addClass方法時，並非將原有的css樣式覆蓋，而是將標籤添加上css樣式，添加後的加載與css文件中的順序有關，也就是後寫的覆蓋前邊的。