CSS层叠规则总结

最近在看《CSS权威指南》，用于复习CSS知识，可看到有关层叠和特指度那一章的时候，感觉书本上说得有点乱，所以自己就画了一张流程图来进行总结，也便于理解，现在分享给大家。

如果有总结不到位，或者错误的地方，请不吝赐教、帮我指出来。

直接上图：

说明：

1.这里仅仅针对某个标签的某个样式进行举例，但是可以扩展到存在于文档中的所有标签和所有样式

2.由于开发过程中，不需要考虑读者提供的样式，所以实际上，我们在写样式的时候只要注意黑框内容即可

3.CSS之外的表现提示不推荐使用，但如果使用了，它比浏览器默认样式要高一级

前置知识：

 

声明的权重排序（CSS权威指南原话）：

1.读者提供的样式中以!important标记的声明。

2.创作人员编写的样式中以!important标记的声明。

3.创作人员编写的常规声明。

4.读者提供的常规声明。

5.用户代理的默认声明。

其中：用户代理一般指浏览器，创作人员就是程序员，读者代表用户（但读者具体怎么提供样式，我不是很清楚）

 

特指度：

选择器的特指度由选择器本身的组成部分决定。一个特指度值由四个部分构成，例如0,0,0,0。（个人不习惯1000,100,10,1这种权重计算方式）。那么各选择器能贡献多少特指度值呢？

内联样式：1,0,0,0

ID选择器：0,1,0,0

类选择器、属性选择器、伪类：0,0,1,0      （否定选择器对特指度没有影响，但是其内部的选择器会有影响）

元素、伪元素：0,0,0,1

通用选择器：0,0,0,0          （标位0,0,0,0的原因是，它可以覆盖继承的样式，也就是说继承的样式根本无特指度可言，是个选择器就能欺负它）

连接符（空格、>、+、~等）：无

注意：上述特指度比较的时候会先进行分组，！impotant作为一组比较，非！important作为一组比较

 

先后位置排序：

如果冲突的样式显示权重、来源和特指度都一样，那么就比较它们在样式表中的位置，位置靠后的胜出，当然，在这之前先得看看样式是怎么引入的。

具体的：优先使用style标签里的样式、其次使用@import样式表里的样式、最后再考虑link标签里引用的样式表的样式。