在了解CSS的继承与层叠之前，首先要了解一下html的文档树 以及选择器的特殊性和重要性（!important）！
CSS 继承
子元素将会继承父元素的css样式
在DOM树中，该属性样式会传递到父节点的最后一个子节点 知道没有节点为止
比如：
<div>
哈哈 我是父元素
<p>我是子元素</p>
<p>我是子元素</p>
<p>我是子元素</p>
</div>
设置<p>的CSS样式
div {
color: red;
}
猜猜会得到什么样的结果？？？
div以及其中的p标签内的文本都会变成红色！！！
继承.PNG
！！但凡是都有特例，子元素并不是所有的属性都能够继承，比如大多数框模型（外边距、内边距、背景、边框）可以自己试着写一下看看有什么效果··
其中继承样式 无特殊性 (连0都没有）*（通配选择器的特殊性为0）
要注意没有特殊性和 特殊性为0还是有很大差别的
举个例子：
* {
color: brown;
}
#text {
color: blue;
}
</style>
<div id=text>
哈哈 我是父元素
<p>我是子元素</p>
<p>我是子元素</p>
<p>我是子元素</p>
</div>
现在文本的颜色变成了什么样呢？？
其实是这样
特殊性0&无特殊性.PNG
特殊性为0 还是战胜了 无特殊性！！
CSS 层叠
让我们想想若两个规则的特殊性相同元素的最终样式会变成什么样？？？
（快想想CSS的中文名称是什么---）
<style>
p {
color: red;
}
p {
color: yellow;
}
</style>
p的文本颜色到底是什么样的呢？其实他是黄色的！
那我们现在来说一下CSS的层叠规则：
1. 按权重和来源排序
2. 按特殊性排序
3. 按顺序排序
1. 按权重和来源排序
标志!important的规则的权重要高于没有!important标志的规则
CSS三种样式来源：创作人员、读者和用户代理 权重比较
1.读者的重要声明 !important
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理（浏览器默认样式）声明
2.按特殊性排序
不同类型的选择器特殊性不同
其中ID选择器 > 类选择器 > 标签选择器
但是 这些选择器的属性若没有标志!important则会被内联样式所覆盖
比如：
<div id=text style="color:blue"> //为div添加内联样式
哈哈 我是父元素
<p>我是子元素</p>
<p>我是子元素</p>
<p>我是子元素</p>
</div>
为其设置CSS样式
<style>
div {
color: red;
}
#text {
color: yellow;
}
</style>
结果 字体变成了蓝色！！
内联样式.PNG
3.按照出现顺序排序
这一条就不多说了
当两条规则的特殊性相同时 最后出现的样式为准
所以我们通常把主样式放在最后
