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等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
随机推荐
- Cannot export AX project in AX7
I tried to export project from VS. I succeed before. But today I got a Microsoft Visual Studio err ...
- Java.lang.OutOfMemoryError处理
此错误对于新手做项目的时候经常会发生,而且不容易处理 默认情况下,每个android程序的dailvik虚拟机的最大堆空间大小为16M 当加载的图片太多或图片过大时经常出现OOM问题 而出现此类问题最 ...
- Xcode证书路径和缓存清理路径
1.Xcode证书路径: ~/Library/MobileDevice/Provisioning Profiles 2.Jenkines共享证书路径: /用户/共享/Jenkins/Library/M ...
- Android中使用抖动动画吸引来用户注意
原文:http://www.androidcn.org/topic/552e65bc61d460226ab27a5c 在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引 ...
- 【读书笔记】iOS-引用计数
Cocoa采用了一种称为引用计数的技术,有时也叫做保留计数.每个对象有一个与之相关联的整数,称作它的引用计数器或保留计数器.当某段代码需要访问一个对象时,该代码将该对象的保留计数器值加1,表示“我要访 ...
- 用的比较多的linux命令
vi编辑器 :set nu 显示行号 :$ 到文件最后一行 文件查找 find . -maxdepth 1 -name "@*" 这个命令意思是,查找当前目录下以@开 ...
- ERROR: The partition with /var/lib/mysql is too full! failed!
发现:ERROR: The partition with /var/lib/mysql is too full! failed! 然后df -h 发现硬盘100% 于是分析到底什么占用了这近两百G ...
- (ios7) 解决Ios7中,Navigatebar 显示在主View中,和ios6 不一致问题
在ios 7 系统中 NavigateBar 显示在主View中 ,Ios6 不在主View中,导致后台代码的方式编写View不一致 解决方法: 在ViewControl的viewDidLoad 方法 ...
- 手动将自定制的WebPart部署到 SharePoint 2010 中
1.搭建好开发环境,建立webpart工程,写代码. 2.修改assembly.cs文件 在部署前,需要修改assembly文件,增加以下两句: using System.Security; [a ...
- MongoDB学习笔记——数据库安装及配置
MongoDB数据库安装 MongoDB官方下载地址:https://www.mongodb.com/download-center 首先需要根据Windows版本选择正确的MongoDB版本进行安装 ...