1，什么叫做层叠性？
这个要从css的名字说起，css的全名叫做“层叠式样式表”，层叠行是她很重要的性质。层叠行是指“多个选择器可以同时作用在同一个标签，效果叠加”
<p id="para" class="spec">我是段落</p>
<style>
p {
color:red;
}
.spec {
font-style:italic;
}
#para {
text-decoration:underline;
}
</style>
效果一
这个时候我们可以发现这三个选择器都选择到了这个标签，并且样式也都生效了，就像是一层一层的刷上去的 ，这就是css的层叠性。
2，层叠行的冲突处理
如果多个选择器定义的属性有冲突呢？
css有严密的处理冲突的规则:id权重 > class权重 > 标签权重
p {
color:red;
}
#para {
color:green;
}
.spec {
color:blue;
}
效果二
最终会以ID选择器的样式为准
3，复杂选择器权重计算
负责选择器可以功过（id的个数，class的个数，标签的个数）的形式，计算权重
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是段落</p>
</div>
</div>
</div>
<style>
/* id 个数：2，class个数：0，标签个数：1*/
#box1 #box2 p {
color:red;
}
/* id 个数：2，class个数：1，标签个数：2*/
#box1 div.box2 #box3 p {
color:green;
}
/* id 个数：0，class个数：3，标签个数：1*/
.box1 .box2 .box3 p {
color:blue;
}
</style>
效果3
css会先冲权重高的id选择器个数开始判断，当id个数相同时会判断.class的个数，一次类推。所以这里会使用第二个样式，将文字颜色设置为green；
4,!important提升权重
如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important
.spec {
color: blue !important;
}
很多公司不允许使用!important,因为这会代理不经意的样式冲突。
5, 就近原则
当样式是通过继承获取到的时候。那么则和权重的大小无关，哪个选择器距离的近就使用哪一个选择器的样式！
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是段落</p>
</div>
</div>
</div>
<style>
#box1 #box2 {
color:red;
}
/* p 标签距离 .box3 更近 所以这里p标签会优先继承这个样式*/
.box1 .box3{
color:green;
}
</style>
