继承性
CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号
-
恰当地使用继承可以简化代码,降低CSS复杂性
-
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)(高度和模型内外边距不会继承)
- 所有元素可继承:visibility和cursor。
- 行内元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
- 块状元素可继承:text-indent和text-align。
- 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
- 表格元素可继承:border-collapse。
层叠性
层叠性原则:
-
样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式
-
样式不冲突,不会层叠
优先级
当同一个元素指定多个选择器,就会有优先级的产生
-
选择器相同,则执行层叠性
-
选择器不同,则根据选择器权重执行
选择器 | 选择器权重 |
继承 或者 * | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器 伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | =无穷大 |
公式:通配符选择器<标签选择器<类选择器<ID选择器<行内样式<!inportant
(选中标签的范围越大,优先级越低)
注意点:
-
权重是有4组数字组成,但是不会有进位
-
可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推
-
等级判断从左向右,如果某一位数值相同,则判断下一位数值
-
可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式表为1000,!important为无穷大
-
继承的权重是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