CSS三大特性
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
1.CSS层叠性
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
样式冲突，遵循的原则是就近原则。 哪个样式离结构近，就执行哪个样式。
样式不冲突，不会层叠
示例：
<style>
div {
color: red;
}
div {
color: blue;
}
</style>
<div>
我是层叠性的测试
</div>
由于第二个div离div较近，根据就近原则，所以文字变为蓝色。
2.CSS继承性
简单的理解就是： 子承父业。
示例：
<style>
.test{
color:red;
}
</style>
<div class="test">
<p>
我是继承性的测试
</p>
</div>
可以看到p继承了div的属性，字体变为了红色。
| 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） |
3.CSS优先级
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
| 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。 |
CSS特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
权重是可以叠加的
比如的例子：
div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2a:hover ----—> 0,0,1,1 .nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1 |
总结：权重是优先级的算法，层叠是优先级的表现
CSS优先级测试题
（1）
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important;
}
</style>
<div id="father" class="c1"> <p id="son" class="c2"> 试问这行字体是什么颜色的？ </p> </div>（2）
<style type="text/css">
#father{
color:red;
}
p{
color:blue;
}
</style>
<div id="father"> <p>试问这行字体是什么颜色的？</p> </div>
（3）
<style type="text/css">
div p{
color:red;
}
#father{
color:red;
}
p.c2{
color:blue;
}
</style>
<div id="father" class="c1"> <p class="c2"> 试问这行字体是什么颜色的？ </p> </div>
（4）
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
<div> <div> <div> 试问这行字体是什么颜色的？ </div> </div> </div>
（5）
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me{
color:blue;
}
</style>
<div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div class="me">试问这行文字是什么颜色的</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
（6）
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
</style>
<div id="box1" class="c1"> <div id="box2" class="c2"> <div id="box3" class="c3"> 文字 </div> </div> </div>
答案：
（1）
（2）（父级继承权重为0000）
（3）
（4）
（5）
（6）
