CSS优先级的详细解说
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS优先级的详细解说
⼀、什么是CSS优先级?
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
⼆、CSS优先级规则
既然样式有优先级，那么就会有⼀个规则来约定这个优先级，⽽这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1、统计选择符中的ID属性个数。
2、统计选择符中的CLASS属性个数。
3、统计选择符中的HTML标记名个数。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到⼀个三位数(css2.1是⽤4位数表⽰)。
( 注意，你需要把数字转换成⼀个以三个数字结尾的更⼤的数)。
相应于选择符的最终数字列表可以很容易确定较⾼数字特性凌驾于较低数字的。
例如：
1、每个ID选择符(#someid)，加 0,1,0,0。
2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
3、每个元素或伪元素(:firstchild)等，加0,0,0,1。
4、其它选择符包括全局选择符*，加0,0,0,0。
相当于没加，不过这也是⼀种specificity，后⾯会解释。
三、特性分类的选择符列表
以下是⼀个按特性分类的选择符的列表：
单从上⾯这个表来看，貌似不⼤好理解，下⾯再给出⼀张表：
通过上⾯，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0(后⾯会讲到)。
按这些规则将数字符串逐位相加，就得到最终的权重，然后在⽐较取舍时按照从左到右的顺序逐位⽐较。
优先级问题其实就是⼀个冲突解决的问题，当同⼀个元素(内容)被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。
说到这⾥，我们不得不说⼀下CSS的继承性。
四、CSS的继承性
4.1 继承的表现
继承是CSS的⼀个主要特征，它是依赖于祖先-后代的关系的。
继承是⼀种机制，它允许样式不仅可以于某个特定的元素，还可以应⽤于它的后代。
例如⼀个BODY定义了的颜⾊值也会应⽤到段落的⽂本中。
样式定义：
举例代码：
举例效果：
这段代码的应⽤结果是：“CSS继承性的”这段话是红颜⾊的，“继承性”⼏个字由于应⽤了标签，所以是粗体。
很显然，这段⽂字都继承了由body {color:#f00;}样式定义的颜⾊。
这也就是为什么说继承性是CSS的⼀部分。
然⽽CSS继承性的权重是⾮常低的，是⽐普通元素的权重还要低的0。
我们仍以上⾯的举例代码为例：在样式定义中添加⼀条：
举例效果：
发现只需要给加个颜⾊值就能覆盖掉它继承⾃的样式颜⾊。
由此可见：任何显⽰申明的规则都可以覆盖其继承样式。
4.2 继承的局限性
继承是CSS重要的⼀部分，我们甚⾄不⽤去考虑它为什么能够这样，但CSS继承也是有限制的。
有⼀些属性不能被继承，如：border, margin, padding, background等。
样式定义：
举例代码：
预期效果：
实际效果：
从上⾯的效果中，我们可以看出，border是不能被继承的，还有⼀些其它的属性也是如此，这⾥就不⼀⼀列举。
五、总结
选择器优先级：
#id(id选择器)>.class(类选择器)>标签选择器
标签 #id >#id ; 标签 .class>.class
指向越具体，优先级越⾼。
四种引⽤⽅式的优先级：
⾏内式>嵌⼊式>外部样式
外部样式中，⽆论是链接式，还是导⼊式。
后引⼊的优先级⾼于出现在前⾯的。
如果在<head>中存在多个<style>标记，那么这些标记和链接式之间将由先后顺序决定优先级，⽽在同⼀个<style>内部，才会遵循嵌⼊式优先于导⼊式的规则。
六、附加说明
1、⽂内的样式优先级为1,0,0,0，所以始终⾼于外部定义。
这⾥⽂内样式指形如<div style="color:red>blah</div>的样式，⽽外部定义指经由<link>或<style>卷标定义的规则。
2、有!important声明的规则⾼于⼀切。
3、如果!important声明冲突，则⽐较优先权。
4、如果优先权⼀样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承⽽得到的样式没有specificity的计算，它低于⼀切其它规则(⽐如全局选择符*定义的规则)。
6、关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，⼀般优先权冲突时是占下风的。
还需要说⼀下，IE是可以识别位置错误的@import的，但⽆论@import在什么地⽅，它都认为是位于所有其它规则定义之前的，这可能会引发⼀些误会。
优先权问题看起来简单，但背后还是有⾮常复杂的机制，在实际应⽤中需要多多留意。