## 14.8.1.层叠性 所谓层叠性，是指对同一元素同一属性的设定，后设定的某个样式（属性），会覆盖之前设定的样式。 比如： ``` .cc1{ color: red;} .cc1{color: blue;} <div class=”cc1”>文字内容</div> ``` 则class为cc1的元素中的文字颜色就是blue，即后者覆盖了前者的设定。 分两种情况： １，两个相同的选择器，设置了同样的属性，后者覆盖前者——层叠性体现之一。 ２，两个不同但同级优先性的选择器，设置了同样的属性，也是后者覆盖前者——体现之二。  ## 14.8.2.继承性 所谓继承性，是指对某个元素所设定的样式，不但影响该元素本身，还可能影响该元素的后代元素。 比如： ``` .cc1{color:red;} <div class=”cc1”> 文字1 <p>文字2</p> </div> ``` 则此时文字1和文字2实际都是红色。 注意： 实际上继承性不是普遍情况，而只是少数一些属性才具有继承性（即能够影响后代元素）。 应用中继承性通常用在有关文字的属性上。  ## 14.8.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优先； ``` 最后，综合上述两条规则就可以判断出哪个是优先的。 基本优先级演示：  复合选择器的优先级演示：