三大特性：层叠性、继承性、优先级

1、层叠性（覆盖性）

给相同的选择器设置相同的样式，此时一个样式会覆盖（层叠）其他冲突的样式。
层叠性原则：

• 同一选择器，样式冲突，遵循就近原则。按最后一个取样式
• 同一选择器，样式不冲突，不会覆盖

练习：颜色冲突，字体大小不冲突

css层叠样式按照就近原则

2、继承性

子标签会继承父标签的某些样式，比如文本颜色和字号，简单理解就是：子承父业。
好处：降低CSS样式的复杂性
可以继承的部分：子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，还有color属性）

css层叠样式按照就近原则
css样式继承

p继承了div

2.1 行高的继承

行高可以跟单位，也可以不跟单位,表示行高是当前文字的多少倍。这样写的好处：
元素可以根据自身文字大小动态调整行高

body{font-size:12px/1.5;//1.5表示当前行高是当前字号大小的1.5倍。12*1.5
}

练习：继承了行高是字体的1.5倍

css层叠样式按照就近原则
css样式继承

3、优先级

场景：当同一个元素指定了多个选择器，就会有优先级的产生

• 选择器相同，按照层叠性进行执行（就近原则）
• 选择器不同，按照选择器的权重执行

• 如果有多个import，就执行层叠性
• a标签浏览器默认有样式：蓝色字体+下划线，所以不会继承父亲的这些属性值。需要修改a的样式，要单独设置
• 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

div{color：pink!important;
}

练习1：元素选择器<类选择器

样式优先级

练习2：类选择器

样式优先级important

3.1 权重叠加

场景：如果是覆盖选择器，则会出现权重叠加问题，需要重新计算权重
权重叠加不会有进位问题

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

练习:
把第一个li元素的内容设置为粉色，加粗

权重叠加
权重叠加
权重叠加