样式表：stylesheet

为什么需要层叠

为什么需要 CSS 的层叠？
声明冲突：同一个样式，多次应用到同一个元素上 。比如：

  1. 自己写的声明和浏览器的默认声明；
  2. 自己制造声明冲突

层叠的作用：通过权重计算的方式，解决声明冲突的过程（浏览器自动解决）

层叠的过程

(一) 比较重要性

重要性从高到低：

作者样式表：开发者书写的代码

  1. 作者样式表中的!important样式（基本不会用它的）
    a{text-decoration：none !important;}
  2. 作者样式表中的普通样式
  3. 浏览器默认样式表中的样式

(二) 比较特殊性

总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（xxxx），每个数逢255进一

  1. 千位：如果是内联样式，记为1，否则为0
  2. 百位：等于选择器中所有id选择器的数量
  3. 十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量
  4. 个位：等于选择器中所有元素选择器，伪元素选择器的数量 
  1. /*0003*/
  2. div ul a{
  3.   text-indent:0.5em；
  4. }
  5. /*0201*/
  6. #mydiv #myul a{
  7.   text-indent:1em；
  8. }
  9. /*0210*/
  10. #mydiv #myul .mylink{
  11.   text-indent:2em；
  12. }
  13. /*0211，它最大，就选它*/
  14. #mydiv #myul a:link{
  15.   text-indent:3em；
  16. }

(三) 比较源次序

  • 代码书写靠后的输出
  1.     /*0210*/
  2.     #mydiv #myul .mylink{
  3.         text-indent:2em；
  4.     }
  5.     /*0210，就决定是你了皮卡丘*/ 
  6.     #mydiv #myul a:link{
  7.         text-indent:3em；
  8.     }

(四) 层叠的应用

  1. 重置样式表
    书写作者样式表，覆盖浏览器默认样式

重置样式表 -> 浏览器默认样式表(之后再写一些样式表，覆盖重置样式表)

常见重置样式表的命名：normalize.css、reset.css、meyer.css

  1. 爱恨法则

    排列先后：link > visited > hover > active