css层叠

CSS层叠机制

说到层叠机制，就先要知道声明冲突。
声明冲突：同一个标签，多个相同属性名不同属性值。
①多个选择器选中同一个标签；②声明块里的属性相同；③属性的属性值不同。同时满足这三点时就会产生声明冲突。
比如：

 span{
     color:red;
  }
 p>span{
     color:blue;
 }
div>p>span{
     color:green;
 }

这个时候就会产生声明冲突。
　　浏览器只会挑其中一个选择器中的样式来渲染网页，关于如何挑选就是层叠机制的内容。
　　**层叠机制：**是一种机制，当发生声明冲突时自动触发，浏览器通过层叠机制解决声明冲突。主要内容为。
1、首先比较样式表的优先级。
　　　样式表的优先级受来源和重要性影响。
　　　来源：作者样式表>浏览器默认样式表
　　 重要性：针对作者样式表而言的，有！important>无重要样式声明
　　 因此作者重要>作者普通>浏览器默认。
　　 因此我们所写的代码就会覆盖浏览器默认的样式。
2.比较特殊性，也叫权重or特指度。
　　 规则：行内样式>ID选择器>类、伪类、属性选择器>元素、伪元素选择器>通配符选择器
　　 当发生声明冲突且他们优先级相同时，我们比较特殊性，我们对每一个样式会产生一个四元数组（a,b,c,d）
　　 其中：
　　　　　a：行内样式为1，否则为0
　　　　　b：ID选择器的个数
　　　　　c：类、伪类、属性选择器的个数
　　　　　d：元素、伪元素选择器的个数
　　 依次从前往后比，大的胜出，一旦胜出，无需再比较之后的数值。
3. 比较源次序。当优先级和特殊性都一样时，书写顺序上，后写的会覆盖先写的。
　　以上，就是层叠机制的主要内容。