层叠

层叠

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

1.比较重要性

重要性从高到低

作者样式表：开发者书写的样式
1)作者样式表中的!important样式(太高级了，不建议加)
2)作者样式表中的普通样式
3)浏览器中默认样式

2.比较特殊性

看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个四位数（****）

1. 千位：如果是内联样式，在某个元素内部定义样式，记1，否则记0
2. 百位: 等于选择器中所有id选择器的数量
3. 十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量
4. 个位：等于选择器中所有元素选择器，伪选择器的数量

<style>
        a{
            /* 0001*/
            color:rosybrown;
        }
        div ul a{
            /* 0003 */
            color:green;;
        }
        #mydiv #myul a{
            /* 0201 */
            color:grey;
        }
        #mydiv #myul .mylink {
            /* 0210 */
            color:saddlebrown;
        }
        #mydiv #myul :link{
            /* 0210 */
            color:red;
        }
    </style>

3.比较源次序

代码书写靠后的胜出

应用

1. 重置样式表
   书写一些作者样式，覆盖浏览器的默认样式
   常见的重置样式表：normalize.css、reset.css、meyer.css
2. 爱恨法则
   link > visited > hover > active