## 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優先； ``` 最后，綜合上述兩條規則就可以判斷出哪個是優先的。 基本優先級演示：  復合選擇器的優先級演示：