CSS权重实例以及解决
今天学习jQuery的时候，仿照视频敲了一个tab实例（在此感谢发布视频的so what老师）。很简单的一个小例子。然后我仿照代码，做了一个侧边栏。但是有点小问题
html、jq、css代码各如下：
html：
<ul class="sBchoose">
<li class=""></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
jq：
<script type="text/javascript">
$(function(){
var divs = $(‘.sBchoose li‘);
divs.mouseover(function(){
$(this).addClass(‘current1‘).siblings().removeClass();
}).click(function(){
$(this).addClass(‘current2‘).siblings().removeClass();
}).mouseout(function(){
$(this).removeClass();
});
});
css：
.sBchoose{
padding-top:35px;
width:148px;
height:401px;
margin:0 auto;
background:#F1F1F1;
border-radius:5px;
border:1px solid #DCDCDC;
}
.sBchoose li {
width:135px;
height:35px;
margin:0 auto;
margin-bottom:30px;
border-radius:6px;
color:white;
cursor:pointer;
background:#FF6600;
}
.current{
background:#E65F05;
}
这样乍一看是没问题的。可是因为li‘有背景色，所以current里面的背景色无法覆盖掉原色。是因为 .current权重没 .sBchoose li 高，所以不渲染。
解决办法
将 .current{}这段css代码前面加 .sBchoose命名空间（此处感谢群友冷无缺），提升.current的权重，就可以渲染了。
如果你遇到了似乎没有起作用的CSS规则，很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID，从而提高它的特殊性。
附：css选择器权重：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
