16、CSS基础——层叠

层叠

声明冲突：同一个样式，多次应用到同一个元素。

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

1. 层叠的顺序（步骤）

1.1 比较重要性

重要性从高到低：

1）作者样式表中的!important样式

a{
	color: red !important;
}

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

!important重要性程度过高，所以一般不使用

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

3）浏览器默认样式表的样式

1.2 比较特殊性

看选择器

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

具体规则：通过选择器，计算出一个4位数（xxxx），数越大越特殊（逢256进1）

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

1.3 比较源次性

重要性和特殊性都一样的情况下，代码书写靠后的胜出。

2. 应用

1.重置样式表

书写一些作者样式，覆盖浏览器的默认样式

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

meyer重置样式表参考https://blog.youkuaiyun.com/lvh98/article/details/120786652?spm=1001.2014.3001.5501

2.爱恨法则

顺序是按照需求，根据比较源次性确定