今天学习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。