所謂層疊性是指多種CSSyangshi_10628_1.html' target='_blank'>CSS樣式的疊加，也就是說后面設置的樣式會層疊（覆蓋）之前的樣式，層疊性的前提是CSS的選擇器的優先級相同，例如，當使用內嵌式CSS樣式表定義 p 標記字號大小為12像素，鏈入式定義 p 標記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產生了疊加。

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 6 title CSS層疊性 /title 7 style 8 .box { 9 background-color: red;10 height: 200px;11 width: 200px;12 }13 14 .wrap {15 background-color: green;16 }17 /style 18 /head 19 body 20 div >
瀏覽器顯示的結果為長寬各為200像素，背景色為綠色的div，原因是box中定義的背景色被wrap中定義的背景色覆蓋了
通過瀏覽器的F12審查元素，也可以看出
繼承性
CSS的繼承性是指，子容器的樣式會繼承父容器的樣式。但并不是所有的樣式都能繼承。只有部分樣式能繼承，比如：文字相關字體大小、顏色、字體樣式、行高、鼠標樣式等。
盒子相關的樣式都不能繼承，比如：寬高、背景色、邊距、浮動、絕對定位等。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title CSS繼承性 /title 6 7 style type= text/css 8 .parent { 9 color: red;10 font-size: 20px;11 height: 300px;12 width: 300px;13 background-color: green;14 }15 16 .child {17 height: 100px;18 width: 100px;19 }20 /style 21 22 /head 23 body 24 div >
效果如下：
可以看到p標簽與子div都繼承了父div字體的顏色與大小，但是子div沒有繼承父div的寬高與背景色，
繼承的樣式實線字表示了出來，其他樣式虛化了。
注意：恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。但是，如果在網頁中所有的元素都大量繼承樣式，那么判斷樣式的來源就會很困難，所以對于字體、文本屬性等網頁中通用的樣式可以使用繼承。例如，字體、字號、顏色、行距等可以在body元素中統一設置，然后通過繼承影響文檔中所有文本。
特殊性（優先級）
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。這時元素顯示的是哪種樣式呢？
首先我們先給出一個優先級的結論：
行內樣式 頁內樣式 外部引用樣式 瀏覽器默認樣式
important 內聯 ID 偽類|類 | 屬性選擇 標簽 偽對象 通配符 繼承
下面來看例子，默認情況下，字體的顏色由瀏覽器的設置決定
當我們給body加上樣式之后，字體的顏色變為了紅色，說明繼承的樣式 瀏覽器默認樣式
當我們給加上通配符的樣式之后，字體顏色變為了灰色
說明通配符的樣式優于繼承的樣式，再試一下標簽選擇器的樣式優先級
可見標簽選擇器的優先級優于通配符的樣式，其他類型的樣式可以自行測試，其中!important可以改變樣式的權值
可以看到h1標題顯示的字體顏色為藍色，因為!important屬性可以提高樣式的權值，下面簡單說明下css的權值，css中每種樣式類型都有自己的權值
1、內聯樣式表的權值最高 1000；
2、ID 選擇器的權值為 100
3、Class 類選擇器的權值為 10
4、HTML 標簽選擇器的權值為 1
有時候我們會在同一元素上應用不同的樣式規則，例如
以上就是CSS層疊性、繼承性、特殊性的實例詳解的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。