# CSS 三大特性
CSS 由单个非常重要的三个特性:层叠性,继承性,优先级
# 层叠性
相同选择器给设置相同的样式,此时一个样式就会 == 覆盖 (层叠)== 另一个样式,层叠性主要解决样式冲突的问题
层叠性原则 :
- 样式冲突,遵循的原则是就近原则,那个样式离结构近,就执行哪个样式
- 样式不冲突,不会重叠
# 继承性
CSS 中的继承:子标签会继承父标签的某些样式,如文本的颜色和字号.
- 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
- 子元素可以继承父元素的样式 (text- , font-, line- 这些元素开头的可以继承,以及 color 属性)
# 行高的继承性
1 | body { |
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则可以继承父元素的行高为 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 | ∞无穷大 |
优先级注意点 :
- 权重是由 4 组数字组成,但是不会有进位
- 可以理解为类选择器永远大于元素选择器,ID 选择器永远大于类选择器
- 等级判断从左向右,如果某一位数值相同,则判断下一位数值
- 可以简单记忆法:通配符和继承权重为 0, 标签选择器为 1, 类 (伪类) 选择器为 10, id 选择器为 100, 行内样式表为 1000, !important 无穷大
- 继承的权重是 0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0
