1.层叠性
相同的选择器设置同样的设置时,此时会有一个样式层叠覆盖到另一个样式上,主要用来解决样式冲突的问题。
层叠性的原则:
1.如若有冲突,按就近原则进行层叠,哪个样式离结构近,那么优先执行哪个样式
2.样式不冲突的地方不会层叠
2.继承性
CSS中,子标签会继承父标签的某些样式,如文本颜色,字号等等诸如此类....
1.恰当的使用继承性,可以让代码中的css样式不再那么复杂
2.子元素可以继承父元素的一些样式(text-,font,line-开头的都能继承,以及color属性)
行高的继承
body{
font:12px/1.5 Microsoft YaHei;
}
1.行高可以跟单位也可以不跟
2.如果子元素没有设置行高,则继承父元素行高为1.5
3.此时子元素的行高是:当前子元素的文字大小1.5
4.body行高1.5这样最大的优势是,里面的子元素可以根据自己文字大小自动调整行高
3.优先级
当同一个元素指定了多个选择器,就会有优先级的产生
1.选择器相同,则会执行层叠性
2.选择器不同,则会按照选择器的权重执行
选择器 | 选择器权重 |
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style = " " | 1,0,0,0 |
!important (尽量少使用) | 约等于无穷大 |
继承的权重很低,如果这个元素没有被直接选中,不管父元素的权重有多高,子元素得到的权重都是0.
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重