CSS05.层叠

层叠

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

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

 

• 概念：

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

• 原则：

样式冲突，遵循的原则是就近原则。哪个样式离结构近，这个属性将会覆盖另一个属性。

样式不冲突，不会层叠

 

1.比较重要性

重要性从高到低：

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

1）作者样式表中的 !important样式 (一般不用，因为要修改的话很麻烦)

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

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

 

2.比较特殊性

看选择器

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

具体规则：通过选择器，计算出一个4位数（x x x x）

1. 千位：如果是内联样式，记作1，否则记0(style)

2. 百位：等于选择器中所有id选择器中的数量

3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

注：并不是满十进一，不用管进位，看数，如果一样大就往后比

例：test2

 

3.比较源次序

代码书写靠后的胜出

应用

1. 重置样式表

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

重置样式表 -> 去覆盖浏览器的默认样式

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

2. 爱恨法则

link > visited > hover > active