CSS优先级的详细解说_html/css_WEB-ITnose

　 　一、什么是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定义了的颜色值也会应用到段落的文本中。

　　样式定义：

PhotoG

PhotoG是全球首个内容营销端对端智能体

121

查看详情

　　举例代码：

　　举例效果：

　　这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。

　　然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

　　我们仍以上面的举例代码为例：在样式定义中添加一条：

　　举例效果：

　　发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。

　　4.2 继承的局限性

　　继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。

　　有一些属性不能被继承，如：border, margin, padding, background等。

　　样式定义：

　　举例代码：

　　预期效果：

　　实际效果：

　　从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。

　　五、总结

          选择器优先级：

#id(id选择器)>.class(类选择器)>标签选择器

标签 #id >#id ; 标签 .class>.class

指向越具体，优先级越高。

四种引用方式的优先级：

行内式>嵌入式>外部样式

外部样式中，无论是链接式，还是导入式。后引入的优先级高于出现在前面的。

如果在