CSS基础之层叠

层叠

声明冲突: 同一个样式多次应用到了同一个元素

层叠: 解决声明冲突的过程,浏览器自动处理(权重计算),依次比较.如果在下面三个比较中,能比较出结果就停止

1. 比较重要性

重要性从高到低

1. 作者样式表: 开发者书写的样式表
   (1) 作者样式表中的!important 样式,表示最重要的样式,覆盖其他同类型样式(不建议使用)

ol, ul {
	list-style: none !important;
}

(2) 作者样式表中的普通样式

2. 浏览器默认样式表

2. 比较特殊性

看选择器
总体规则: 选择器选中的访问越窄,越特殊

具体规则: 通过选择器,计算出一个4位数(xxxx),谁大谁特殊,逢256进1.

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

div .name h1{} //根据规则计算为0012
#test1 .name h1{} // 根据规则计算为0111
所以在发生冲突时,下面的样式会覆盖上面的样式

3. 比较源次序

代码靠后的胜出

应用

1. 重叠样式表
   书写一些作者样式表,覆盖浏览器的默认样式

常见的重置样式：normal.css , reset.css , meyer.css