笔者在实现点击表格中某行添加高亮的效果时，发现一个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()设置的样式。