层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
<style>
p{
color:red;
}
p{
color:green;
}
</style>
<body>
<p>What color it is?</p>
</body>
层叠性原则
- 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。(根据就近原则，上述例子中段落p中字体颜色就应该是绿色)
- 样式不冲突，不会层叠。
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。（某些样式：text-，font-，line-这些元素开头的继承，以及color属性）
恰当使用继承可以简化代码，降低CSS的样式复杂度。
行高继承性
body{
font:12px/1.5 Microsoft YaHei;
}
- 行高可以跟单位也可以不跟单位。
- 如果子元素没有设置行高，则会继承父元素的行高为1.5。
- 此时子元素的行高是：当前子元素文字大小的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 | ∞ 无穷大 |
优先级注意问题
⚠️继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素的权重都是0。
<style>
#father{
color:red;
}
p{
color:green;
}
body{
color:black;
}
</style>
<body>
<div id="father">
<p>猜猜看我是什么颜色？</p>
</div>
<a href="">我是黑色吗？</a>
关于<p>答案：绿色
关于<a>答案：不是 是蓝色
因为a链接浏览器默认了一个样式：蓝色 有下划线，相当于a{color:blue},所以要专门写一个a的样式来层叠掉浏览器默认的样式。
权重的叠加
如果是复合选择器就会有权重的叠加，需要计算权重。
⚠️但是需要注意的是权重虽然有叠加，但是永远不会有进位。
- 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
