CSS选择器的权重与优先规则
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?
在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。
那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法:

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下:
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为10。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113
下面是一些计算示例:

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。
我们再来看一个具体的例子:假如有以下组样式规则,你能判断出HTML代码中的两个标题是什么颜色吗?
01 |
#content div#main-content h 2 { |
02 |
color : red ; |
03 |
} |
04 |
05 |
#content #main-content>h 2 { |
06 |
color : blue |
07 |
} |
08 |
body #content div[id= "main-content" ] h 2 { |
09 |
color : green ; |
10 |
} |
11 |
12 |
#main-content div.paragraph h 2 { |
13 |
color :orange; |
14 |
} |
15 |
#main-content [class= "paragraph" ] h 2 { |
16 |
color :yellow; |
17 |
} |
18 |
div#main-content div.paragraph h 2 .first{ |
19 |
color :pink; |
20 |
} |
以下是HTML代码:
01 |
< div id = "content" > |
02 |
< div id = "main-content" > |
03 |
< h2 >CSS简介</ h2 > |
04 |
< p >CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。</ p > |
05 |
< div class = "paragraph" > |
06 |
< h2 class = "first" >使用CSS布局的优点</ h2 > |
07 |
< p >1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</ p > |
08 |
</ div > |
09 |
</ div > |
10 |
</ div > |
判断出来了么?答案是:两个标题都是红色的!
让我们来一起算算六个样式规则各自的特殊性的值:
- 第一个特殊性的值=2*100+2*1=202
- 第二个特殊性的值=2*100+1=201
- 第三个特殊性的值=1*100+1*10+3*1=113
- 第四个特殊性的值=1*100+1*10+2*1=112
- 第五个特殊性的值=1*100+1*10+1*1=111
- 第六个特殊性的值=1*100+2*10+3*1=123
清楚了吧,第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军,后面一些规则虽然看起来好像更复杂,但特殊性并不是拼谁的选择器表达式写得更长,ID选择器才是王道!
理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。
如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。如果 这能解决问题,就说明样式表中其他地方很可能有更特殊的规则,它覆盖了你的规则。如果是这种情况,你可能需要检查代码,解决特殊性冲突,让代码尽可能简 洁。
CSS选择器的权重与优先规则的更多相关文章
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS选择器的权重与优先规
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: ...
- 常见CSS选择器的权重和优先级
一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...
- CSS选择器及其权重
#转载请留言联系 1.标签选择器 标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中.举例: div{color:red} ...... <div>这是第一个di ...
- css选择器的权重
权重会叠加!
- css选择器权重、样式继承、默认样式
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...
- css优先级和权重
1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...
- CSS选择器权重计算规则
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
随机推荐
- android布局--Android fill_parent、wrap_content和match_parent的区别
来自:http://www.cnblogs.com/nikyxxx/archive/2012/06/15/2551390.html 三个属性都用来适应视图的水平或垂直大小,一个以视图的内容或尺寸为基础 ...
- MySQL数据库中字符集的问题
今天在做Hibernate案例,往mysql中写记录的时候,出现ERROR: Incorrect string value: '\xE5\x8A\xA0\xE5\x86\x85...' for col ...
- SharePoint 2013 - REST API about Content
1. 获取所有子站点信息(Sub Site): var subSitesInfo = "{0}/_api/Web/WebInfos?$orderby=Title desc"; // ...
- 关于ApplicationPoolIdentity
一直以来IIS中的网站默认都是以network service在运行,但是从IIS7开始,默认会以ApplicationPoolIdentity运行. 这个账户比较特殊,是一种虚拟帐户,你无法在计算机 ...
- Arcengine实现创建网络数据集札记(二)
四 ArcEngine实现创建网络数据集 ArcEngine创建网络数据集的过程,与ArcMap设置的过程类似,主要通过六个步骤即可以实现. 1 定义网络数据集对象,并设置基本属性,包括网络数据集名称 ...
- IOS编程思想
从今天起想走进IOS架构的大门,一直不屑于学习第三方框架,觉得框架也是一点点代码给垒起来的,只要掌握了代码就可以了,殊不知垒代码的过程才是最重要的,而这个过程又岂是一朝一夕就能达到完美境界的,达到完美 ...
- 带删除的EditText
在安卓开发中EditText是比较常用的控件之一,那我们平常看到EditText填写了内容之后右边会出现一个删除的按钮,这样可以方便用户对其中文本清空操作,是非常人性化的,我们可以重写EditText ...
- 用thinkPHP实现验证码的功能
许多系统的登录都有验证码,而如果使用thinkPHP框架搭建网站的话,验证码的生成和验证就比较容易了 1.生成验证码 thinkPHP有对应生成验证码的方法 要使用验证码,需要导入扩展类库中的ORG. ...
- Android bitmap高效显示和优化
第一部分:Bitmap高效显示 应用场景:有时候我们想在界面上显示一个网络图片或者显示一张本地的图片,但是图片本身是很大的有几兆,但是显示的位置很小或者说我们可以用更小的图片来满足这样的需求,如果把整 ...
- 高质量c/c++里的strcpy()
已知strcpy函数的原型是: char * strcpy(char * strDest,const char * strSrc); 1.不调用库函数,实现strcpy函数. ...