CSS深入基础篇---CSS的三大特性(6)

CSS三个非常重要的三个特性: 层叠性, 继承性, 优先级

层叠性

相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式. 

层叠性有什么作用?

层叠性主要用来解决样式冲突问题

层叠性原则:

样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

样式不冲突的 则不会产生层叠

越往下面定义的 优先级越高

继承性

CSS中的继承:子标签会继承父标签的某些样式,如 文本颜色和字号. 简单的理解就是: 子承父业

例子:

        

继承性的作用: 恰当地使用继承性 可以简化代码 ,降低CSS样式的复杂度

子元素可以继承父元素的样式(text-, font-, line- 这些元素开头的可以继承, 以及color属性)

行高的继承性: 

body {

        font:12px/1.5 Microsoft YaHei;

}

里面的 1.5  如果有子元素内有数据 则是 在子元素自身数据  乘于 1.5

body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字的小自动调整行高

行高可以跟单位也可以不跟单位

优先级

当同一个元素指定多个选择器,就会有优先级的产生

选择器相同,则执行层叠性

选择器不同.则根据选择器权重执行

优先级注意点:

1.权重是由4组数字组成,但是不会有进位

2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器

3.等级判断从左向右,如果某一位数值相同,则判断下一位数值

4.简单记忆: 通配符和继承权重为 0  标签选择器为 1   类(伪类)选择器为10   id选择器100  行内选择器 1000   !importan无穷大

5.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0

例子: 

 

 如果外面看标签执行那个样式,就先看这个标签有没有被选出来

特殊情况:  a链接 浏览器是默认制定了一个样式 蓝色的且有下划线

权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重