(十二)CSS层叠性、继承性、优先级

css继承性和层叠性

继承性

1.如果一个标签自己并没有设置过一些样式，但他的祖先级标签中添加过这些样式，那么在浏览器中该标签具有这些样式，这些样式都是从祖先级继承而来的，这种现象就叫做继承性
2.能够被继承的样式是文字相关的样式 ，其他都不行
3.继承性可以将页面中出现最多的文字样式设置给一个较大的祖先级标签，节省代码量

层叠性

1.同一个标签可以被多个选择器选中，那这些选择器都设置了相同的样式时，浏览器加载时，只会有一个属性会被成功加载，她会层叠、覆盖调其他属性 这种现象就被称之为层叠性
2.层叠性的判断依赖于优先级

情况一：选中目标标签
1.比较多个选择器的权重，权重高的标签层叠掉权重低的标签
id选择器> 类选择器>标签选择器>通配符选择器
高级选择器权重比较方法：依次比较组成高级选择器的id的个数 类的个数 标签的个数 如果前面能够比出大小后面就不再比较，如果前面相等就往后比较 直到比较出大小 如果权重相同，那么就比较书写顺序 书写顺序靠后的会层叠掉书写顺序靠前的
2.如果选择器的权重都一样，那么就按照书写顺序靠后的会层叠掉书写顺序靠前的

情况二：选中祖先级标签，样式是继承过来的
1.如果一个标签有从多个祖先级标签继承过来的相同样式设置，那么也会涉及到层叠性
2.比较就近原则，比较选择器选中的祖先级在html结构中距离目标标签的远近，近的层叠掉远的
3.如果距离一样近，那么就比较选择器的权重 权重大的层叠掉权重小的
4.如果选择器的权重都一样，那么就按照书写顺序靠后的会层叠掉书写顺序靠前的

情况三：!important 和行内样式
1.如果遇到!important时，会将某一条样式的权重提到无穷大，但仅限于该条样式
2.在就近原则中，不需要比较选择器的权重，所有important会失效
3.!important不能提升选择器的权重，只能提升某条属性的权重到最大
4.行内样式权重高于其他所有选择器，但是低于!important