層疊、繼承 、優先級是我們學習CSS 必須掌握的三個特性。 [TOC] # 1. CSS層疊性 所謂層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個能力，如果一個屬性通過兩個相同選擇器設置不同的屬性值，那么這個時候一個屬性就會將另一個屬性層疊掉。 比如先給某個標簽指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標簽指定了相同樣式不同值的情況，這就是樣式沖突。 * **就近原則：** 一般情況下，如果出現樣式沖突，則會按照CSS書寫的順序，以最后的樣式為準。 1. 樣式沖突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。 2. 樣式不沖突，不會層疊 ``` CSS最后的執行口訣： 長江后浪推前浪，前浪死在沙灘上。 ```  <br/> # 2. CSS繼承性 所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。 簡單的理解就是： 子承父業。 **提醒：** 恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）。 <br/> # 3. CSS選擇器優先級 定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。在考慮權重時，初學者還需要注意一些特殊的情況，具體如下： * 繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。 * 行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100。 * 權重相同時，CSS遵循**就近原則**。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。 * CSS定義了一個`!important`命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，`!important`都具有最大優先級。 <br/> ## 3.1 CSS選擇器優先級計算 CSS的選擇器優先級，可以通過計算權重來決定。這套計算公式就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準。具體規范如下： * specificity用一個四位的數 (CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。 | 選擇器 | 貢獻值 | | --- | --- | | 繼承或者* 的貢獻值 | 0,0,0,0 | | 每個元素（標簽）貢獻值為 | 0,0,0,1 | | 每個類，偽類貢獻值為 | 0,0,1,0 | | 每個id貢獻值為 | 0,1,0,0 | | 每個行內樣式貢獻值 | 1,0,0,0 | | 每個!important貢獻值 重要的 | ∞ 無窮大 | 權重是可以疊加的，比如： ```css div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> 0,0,1,1 .nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1 ``` **注意：** * 數位之間沒有進制 ，比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。 * 繼承的 權重是 0。 總結：權重是優先級的算法，層疊是優先級的表現