笔者在实现点击表格中某行添加高亮的效果时,发现一个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()设置的样式。
时间: 2024-10-06 09:33:21