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。

CSS权重实例以及解决

标签：

原文地址：http://www.cnblogs.com/yanpu/p/4341479.html