CSS特性

1.继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性：（文字控制属性都可以继承，非文字控制属性继承不了）

color

font-style,font-weight,font-size,font-famliy

text-indent,text-align

line-height

......

注意点：

可以通过调试工具判断样式是否可以继承

代码展示

效果展示

继承失效的情况

1.如果元素有浏览器默认样式，此时继承性依然存在，但不会生效。

如：a标签的color会继承失效，h系列的font-size会继承失效

2.层叠性

特性：

1.给同一个标签设置不同的样式--此时样式会层叠叠加--会共同作用在标签上

2.给同一个标签设置相同的样式--此时标签会层叠覆盖--最终写在最后的样式会生效

注意点

当样式冲突，只有当选择器优先级相同时，才能通过层叠性判断

代码展示

效果展示

3.优先级

特性：

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

（越精准的优先级越高）

注意点：

 1.！important写在属性值的后面，分号的前面；

2.！important不能提升继承的优先级，只要是继承优先级最低

3.实际开发中！important不建议使用

代码展示

效果展示

 

权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。

计算公式：

第一级：行内样式的个数

第二级：id选择器的个数

第三级：类选择器的个数

第四级：标签选择器的个数

比较规则：

1.比较第一级，如果有结果了，后面的不用看

2.如果最终所有数字相同，表示优先级相同，那就看谁写在最下面，用层叠性判断

3.！important如果不是继承，则权重最高

代码展示

效果展示