css层叠继承

层叠过程

层叠说明：同一个样式，多次应用到同一个元素。为解决声明冲突的过程，浏览器自动处理（权重计算）

1. 比较重要性

   重要性从高到低： 
        （1） 作者样式表中的！important样式
        （2） 作者样式表中的普通样式
        （3） 浏览器中默认样式表中的样式
   

2. 比较特殊性

     总体规则： 选择器选中的范围越窄，越特殊
     具体规则： 通过选择器，计算出一个4位数（**** 不逢十进一）,越大越特殊
          （1）千位： 如果是内联样式(element.style)，计作1，否则计0
          （2）百位： 等于选择器中所有id选择器的数量
          （3）十位： 等于选择器中所有类选择器，属性选择器，伪类选择器到的数量
          （4）各位： 等于选择器中所有元素原则器，伪元素选择器的数量
   

3. 比较源次序

      (1） 比较规则：代码书写靠后的越特殊
   

注：如果比较重要性比较出了高低，就不用进行比较特殊性，比较次源性了，比较特殊性也一样

应用

1. 重置样式：书写一些作者样式，覆盖浏览器的默认样式

    先用重置样式表 —覆盖-> 浏览器默认样式
    再写其他的样式 —覆盖-> 重置样式表样式
   
    网上常见的重置样式： normalize.css  reset.css  meyer.css
   

2. 爱恨法则(比较源次序)：

    link -> visited -> hover -> active
   
    特殊性都一样，为了达到目的，按照这个顺序写，比较源次序
   
    例：a:link {color: #FF0000}        // 未访问的链接
          a:visited {color: #00FF00}  // 已访问的链接 
          a:hover {color: #FF00FF}    // 当有鼠标悬停在链接上
          a:active {color: #0000FF}   // 被选择的链接鼠标按下 
   

继承

    （1）子元素会继承某些父元素的某些属性

    （2）通常，跟文字内容相关的属性都能被继承