第十四节：层叠

层叠

声明冲突：同一个样式，多次应用到同一个元素
比如现在实现，鼠标移动在一个链接的时候实现增加背景颜色，变换字体颜色

    
    
    
    


    Lorem.
    Cupiditate?
    Sequi!
    Sint?
    Corporis?
    Iste.
    Laborum!
    Excepturi?
    Cum?
    Beatae?

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1、比较重要性

重要性从高到低：
1） 作者样式表中的 !important样式
例如上面的代码中如果增加后

        a {
            color: #f40 !important;
            width: 20px;
            padding: 0 5px;
            text-decoration: none;
            font-style: italic;
        }
        a:hover{
            color: #fff;
            background-color: #f40;
        }

页面样式也会改变

2）作者样式表中的普通样式

3）浏览器默认样式表

2、比较特殊性

看选择器
总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（ x x x x ）
1、千位：如果是内联样式，则为1，否则为0
2、百位：等于选择器中所有id选择器的属性
3、十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4、个位：等于选择器中所有元素选择器、伪元素选择器的数量

个位数进制是256位进1的，所以可以忽略累加进制问题

3、比较源次序

代码书写靠后的胜出

应用

1、重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表->浏览器默认样式
一些常见的重置样式表：normalize.css、reset.css、meyer.css

2、爱恨法则
link > visited > hover > active