CSS学习层叠

Posted 2022-11-18 1016391912pm

1.声明冲突

不同的样式，多次应用到同一元素

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

有时候需要修改样式的时候，可以使用优先级高的方式覆盖，而不是在源代码修改

①比较重要性

(1)作者样式表中的 !important 样式 用法：color:red !important; 拥有最高优先级，慎用。

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

(3)浏览器默认样式

②比较特殊性（看选择器）

总体规则：选择器选中的范围越窄，优先级越高（如p.a比a优先级高）

具体规则：通过选择器，计算一个四位数（逢256进1），数越大，优先级越高

千位：内联样式，记做1，其他记做0

百位：id选择器的数量，没有记做0

十位：类选择器，属性选择器，伪类选择器的数量

个位：元素选择器，伪元素选择器的数量

③比较源次序

代码书写靠后的优先级高

 

应用

1.重置样式表

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

就像是一种默认的标准格式的样式，通用的，先把浏览器的样式覆盖掉，后面具体的样式再写一个详细的样式表

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

2.爱恨法则（越写在后面的优先级越高）

link > visited > hover > active

a:linkcolor:black;    正常

a:visitedcolor:gray; 访问过的

a:hovercolor:red;     鼠标在上面时

a:activecolor:chocolate; 鼠标按下时