16、CSS基础——层叠

发布于:2023-02-02 ⋅ 阅读:(296) ⋅ 点赞:(0)

层叠

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

声明冲突

层叠:解决声明冲突的过程,浏览器自动处理(权重计算)。

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.csdn.net/lvh98/article/details/120786652?spm=1001.2014.3001.5501

2.爱恨法则

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


网站公告

今日签到

点亮在社区的每一天
去签到