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。

时间: 2024-10-10 21:28:42

CSS权重实例以及解决的相关文章

[ css 权重 !important ] 使用CSS的!important讲解及实例演示

/** 楔子: !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权(参见:W3.org的解释). 语法格式{ sRule!important },直接写在定义的最后面,如: p{color:green !important;} 注意:IE一直都不支持这个语法,而其他的浏览器都支持.因此我们就可以利用这一点来分别给FF和IE浏览器样式定义. <html> <head> <style type="text/css"> #box

css权重 vs 浏览器渲染 -- css之弊病

昨日,突现一个bug,令人十分恼火. 基本场景 自己实现一多选日历,可多选多天(相连或不相连均可),"贵司"的需求真心有些小复杂了,"市面"上没有这种类似的东东啊 Bug场景 鼠标悬浮到day上时,显示暗灰色,然后点击day的背景变为淡蓝色,问题就出现在这了,当鼠标悬浮的时候此时背景色为暗灰色,但是点击后仍然是暗灰色,只有当鼠标移开这个day的时候才会真正改变背景色 也就是说其实已经发生作用了,但是css并未真正发生作用 纠错历程 起初首先想到的是css权重问题 第

.Net中使用response.write(&#39;js代码&#39;)后css失去效果,解决办法。

net中使用response.write输出js会将js放在源代码的最前面,这样就可能出现破坏网页css的效果,让css失去效果 .net中使用Page.ClientScript.RegisterStartupScript(this.GetType(), "", " <script lanuage=javascript>if(confirm('确定要交卷吗?')==false){history.back()}; </script>"); 可以

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

CSS权重

之前面试碰到的一个题,也算是面试的常见题吧,如下: 说出两个h2的颜色 这个题目考察的就是css权重,参考大漠老师的译文:http://www.w3cplus.com/css/css-specificity-things-you-should-know.html 权重计算公式:从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1.著作权归作者所有. 所以#content div#main-content h2的权重是100*2

css权重计算方法浅谈

在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很大帮助. 从css代码存放的位置来看,权重计算当然是--->内嵌样式 > 内部样式表 > 外联样式表!然而工作中我们的css代码都是写在外联样式表中的咯. 参考w3c样式选择器权重优先级是这个样子的 important > 内嵌样式 > ID > 类 > 标签 | 伪

css sprite实例

css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

jQuery CSS()方法改变CSS样式实例解析

转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接.//.css(‘