CSS的三大特性,指层叠性,继承性,优先性
一.层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠样式主要解决样式冲突的问题
原则:
- 样式冲突,遵循的原则是就近原则,哪个样式离结构式近,就执行哪一个样式
- 样式不冲突,不会层叠
二.继承性
恰当使用继承性可以简化代码,降低CSS的复杂性
子元素可以继承父元素的样式
行高的继承性
body{
font:12px 1.5;
}
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高为1.5
- 此时子元素的行高为:当前子元素的文字大小*1.5
- body行高1.5这样的写法最大的优势就是可以根据自己文字的大小自动调整行高
三.优先级
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
选择器 | 权重 |
---|---|
继承/*选择器 | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类/伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style=“” | 1,0,0,0 |
!important | 无限大 |
注意:
- 权重由四组数字组成,但是不会有进位
- 前永远大于后
- 若某一为相同,比较下一位
- 继承与全选择器权重为0
- 权重叠加:如果为复合选择器,权重为选择器权重相加