提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
css具有三个非常重要的特性:层叠性、继承性、优先级
一、层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则:
- 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。
- 样式不冲突,不会层叠
二、继承性
现实中的继承,我们继承了父亲的姓。
CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和 字号,简单的理解就是子承父业。
- 恰当地使用继承可以简化代码,降低css样式地复杂性。
行高地继承性:
body{
font:12px/1.5 Microsoft YaHei;
}
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高为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 重要的 | ∞无穷大 |
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
- div ul li --------->0,0,0,3
- .nav ul li --------->0,0,1,2
- a:hover ----------->0,0,1,1
- .nav a -------------->0,0,1,1