css的三大特性
层叠性,继承性,优先级
1.1层叠性
相同选择器给相同样式,此时一个样式会覆盖(层叠)另一个冲突的样式。主要解决样式冲突问题
原则:样式冲突,采取就近原则,那个样式离结构近就执行那个样式,样式不冲突,不会层叠
1.2继承性
子标签会继承父标签的某些样式,如文本颜色和字号。
优点:恰当使用可以简化代码,降低css样式的复杂性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
特:行高的继承
body {
font:12px/1.5 Microsoft yahei;
}
行高可以跟单位也可以不跟单位,
子元素继承父元素body的行高1.5,这个1.5是当前元素文字大小font-size的1.5倍。这样写的最大优势就是可以让里面子元素可以根据自己的文字大小自动调整行高。
1.3优先级
当同一个元素指定多个选择器,就会有优先级的产生。
选择器相同,则执行层叠性,选择器不同,则根据选择器权重执行。
!important重要的(∞)>行内样式style=""(1,0,0,0)>id
选择器(0,1,0,0)>类选择器,伪类选择器(0,0,1,0)>元素(标签)选择器(0,0,0,1)>继承或 *(0,0,0,0)
如果属性后跟了!important 则所占权重最大,优先级最高,如
div {
color: green!important;
}
注:权重由4组数字组成,但不会有进位
等级判断从左往右,如果一位数值相同则判断下一位。
继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。