3.1.1 层叠性
所谓层叠性，是指对同一元素同一属性的设定，后设定的某个样式（属性），会覆盖之前设定的样式。
比如：
.cc1{ color: red;}
.cc1{color: blue;}
<div class=”cc1”>文字内容</div>
则class为cc1的元素中的文字颜色就是blue，即后者覆盖了前者的设定。
分两种情况：
１，两个相同的选择器，设置了同样的属性，后者覆盖前者——层叠性体现之一。
２，两个不同但同级优先性的选择器，设置了同样的属性，也是后者覆盖前者——体现之二。
3.1.2 继承性
所谓继承性，是指对某个元素所设定的样式，不但影响该元素本身，还可能影响该元素的后代元素。
比如：
.cc1{color:red;}
<div class=”cc1”>
文字1
<p>文字2</p>
</div>
则此时文字1和文字2实际都是红色。
注意：
实际上继承性不是普遍情况，而只是少数一些属性才具有继承性（即能够影响后代元素）。
应用中继承性通常用在有关文字的属性上。
3.1.3 优先性
所谓优先级，就是指一个标签的显示效果（样式表现），可能受若干个因素的影响，但哪一个因素的影响大，则最终效果就按该因素的设定，也就是“更优先”的意思。
比如：
#pro{ font-size: 20px; }
.ppp{ font-size: 18px; }
<div id=”pro” class=”ppp”> 小米Note 4 </div>
则此时该文字的大小实际是20px。
那，优先级怎么定的？
结论如下：
伪元素选择器 > !important > 行内样式 > id选择器 > 类选择器（或伪类选择器） > 元素选择器 > * > 继承样式 > 浏览器默认样式
其中，伪元素选择器又有： ::first-letter > ::selection > ::first-line
上述黄色背景部分在实际应用中最常见。
什么是“!important”?
就是在一个属性的设定中，在属性值后面加“!important”标识，然后在加分号（;），例如：
.c1{ color: red!important; }
#d1{ color: yellow; }
此时，如果上述两个选择器都能选中某一个元素，则其中的文字就是红色（!important优先了）
选择器的优先级怎么计算？
对于复合选择器（比如div.c1， 或 #id1>.c2， 或#id2>.c3 p span，等等），又该怎么确定他们的优先级呢？
首先，根据上述的基本优先级原则，遵循“官大一级压死人”的规则。
比如：
选择器1： #id1{.....}
选择器2： .c1>.c2>p{....}
则选择器1优先；
其次，如果具有同级的优先级，则比谁的数量多。
比如：
选择器1： .cc1 .cc3 {.....}，
选择器2： .cc1 .cc2 .cc3 {....}
则选择器2优先；
最后，综合上述两条规则就可以判断出哪个是优先的。
