原始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优先级问题吗?, 后来的不是居上吗。
.selected{
background:#333;
color:#f1f1f1;
}
改为
tab tbody tr.group.selected{
background:#333;
color:#f1f1f1;
}
选择器的优先级相同时,是后面的覆盖前面的,但是如果后面的优先级比前面低,是覆盖不了的
这个问题并不是jquery的问题,是css选择器优先级的问题。楼上正解就不说了。
你也可以直接在在后面加!important
css选择器优先级
其实是css权重问题,推荐你看看 http://www.w3cplus.com/css/css-specificity-things-you-should-know.html