关于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的属性，测试是否生效，测试结果如下：