jQ中css()和addClass的区别之优先级

  笔者在实现点击表格中某行添加高亮的效果时,发现一个css()和addClassd()的冲突,具体代码如下:

<style>
    .se
{
    background:#FF6500;
    color:#fff;
}
</style>
<script type="text/javascript">
        $(function(){
            $("tbody>tr:odd").css("background-color","#FFF38F");
            $("tbody>tr:even").css("background-color","#FFFFEE"); 
            $("tbody>tr").click(function(){
                $(this).addClass("se")
                    .siblings().removeClass("se")
                    .end()
                    .find(':radio').attr('checked', true);
            })    
        });
    </script>

  单从代码逻辑上来看,是没有错的。点击后字体颜色也确实改变了,只是背景颜色却不会改变。按理说会按顺序来,最后设置的样式会把之前的同类样式覆盖掉。实际却没有。

  这是为什么呢?先从优先级的角度分析。

  我们知道当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下 :
  外部样式 < 内部样式 < 内联样式 (ps:这个优先级在绝大多数情况下来说能正确的实现,但其实需要涉及到权重的计算)


1..addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上; 


2.通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的 ;


所以通过.css方法设置的样式属性优先级要高于.addClass方法,点击时所添加的类名无法覆盖css()设置的样式。

发布了1 篇原创文章 · 获赞 7 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/u011927449/article/details/105597071