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。

posted on 2015-03-16 12:06  舞动的左手  阅读(295)  评论(0编辑  收藏  举报

导航