jQuery 中新添加的样式为何没有覆盖原始样式

Question

原始tr样式

#tab tbody tr.group{
   background:#ccc;
   color:#333;
   }
  

添加selected"类"

 .selected{
   background:#333;
   color:#f1f1f1;
   }

目的：点击tr改变样式

$("#tab tbody").find("tr.group").click(function ( ) {
     $(this).toggleClass("selected");
});

虽然：这是预想效果

然而：这是实际效果

什么情况，是CSS优先级问题吗？, 后来的不是居上吗。

Answer 1

.selected{
background:#333;
color:#f1f1f1;
}
改为

tab tbody tr.group.selected{

background:#333;
color:#f1f1f1;
}
选择器的优先级相同时，是后面的覆盖前面的，但是如果后面的优先级比前面低，是覆盖不了的

Answer 2

其实是css权重问题，推荐你看看 http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

Answer 3

这个问题并不是jquery的问题，是css选择器优先级的问题。楼上正解就不说了。
你也可以直接在在后面加!important
css选择器优先级