CSS高階特性 層疊行和繼承性 小白基礎
CSS是層疊樣式表的簡稱，層疊性和繼承性是其基本特徵。對於網頁設計師來說，應該深刻理解和應用這兩個特性。
CSS的層疊性和繼承性
所謂層疊性是指多種CSS樣式的疊加。我們呢來透過一個簡單的列子：
p { color：red； font-weight：blod；}
#ppoo { padding： 10px 10px； }
。space { margin：10px10px；}
p標籤就是層疊性
這是一個正常的P標籤
所謂繼承性是指書寫CSS樣式表時，子標記會繼承父標記的某些樣式，如文字顏色和字號。就像我們定義body標籤的color為red，網頁中所有的文字樣式都會繼承body的color：red。
繼承性非常有用，他使我們不用再元素的每個後代上都新增相同的樣式，如果設定的屬性是一個可繼承的屬性，只需要將他定義為父元素即可！例如：pmdiv，h1，h2，ul，ol，li{color：red；}可以寫為body{color：red；}。
恰當的使用繼承則會大大減少程式碼量和複雜性，但是也是會出現問題的，為了減少問題的出現，我們做了統一的規定：字型、字號、顏色、行距等可以再body元素中統一設定，然後透過繼承影響文件中所有文字。
並不是所有的CSS屬性都可以繼承，下面的屬性就不具有繼承性：
邊框屬性
內、外邊距屬性
背景屬性
定位屬性
佈局屬性
元素寬高屬性
需要注意標題標h1~h6有預設字號樣式，會覆蓋繼承的字號樣式，在設定的時候可能有疑惑，為什麼標題不繼承body的樣式呢？
CSS的優先順序
多個樣式規則應用在網頁上就會出現優先順序的問題，我們來透過列子說明：
p {color：red；}
。ppoo {color：blue；}
#header { color：yellow；}
我tm到底是什麼顏色好呢！
我們使用不同的選擇器作用於同一個標籤上，這時瀏覽器會根據優先順序解釋CSS樣式。CSS為每一種基礎選擇器都分配了一個權重，其中，
標記（標籤）選擇器具有權重1、類選擇器具有權重10、id選擇器具有權重100
，這樣id選擇器#header就具有最大的優先順序，話說鱷魚君的網站有這樣的權重該多好吶！呃呃，所以說文字會顯示為黃色。呢我們呢接著往下看：
這樣就需要對權重值進行計算疊加：
p strong{color：red；}/*權重為 1+1*/
strong。oopp{color：#fff；} /*權重為 1+10*/
。ppoo strong{color：blue；}/*權重為 10+1 */
p。ppoo strong{color：yellow；}/*權重為 1+10+1*/
#header strong{color：black；} /*權重為 100+1*/
但是下面的這種情況就不一樣了：
strong{color：red；}
#header{color：blue；}
繼承樣式不如自己定義
雖然header具有權重100，但是被strong繼承時權重為0，strong的權重值雖然為1，但是大於繼承時的權重，所以會顯示紅色red。
行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高。可以理解為遠大於100.總之，他擁有比前面提到的所有的選擇器都大的優先順序。
權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。
CSS定義了一個! important
命令，該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的願景，只要使用了! important，他就是老大！
! important必須位於屬性值和分號之間，否則無效
複合選擇器的權重為組層他的基礎選擇器權重的疊加，但是這種疊加不是簡單的數字之和，我們來看一個案例：
。ppoo{ text-decoration：line-through；}/*類選擇器定義刪除線，權重為10 */
div div div div div div{text-decoration：underline；}/*後代選擇器定義下劃線，權重11 省略*/
我省略了div標籤，總之div標籤是11個，權重大於ppoo的權重，但是結果並不是我們呢預期的呢樣顯示下劃線，而顯示類選擇器ppoo定義的刪除線，即類選擇器的權重大於後代選擇器11疊加的div。無論在外層新增多少個div標記，即複合選擇器的權重無論多少個標記選擇器的疊加，其權重都不會高於類選擇器。同理符合選擇器的權重無論為多少個類選擇器和標記選擇器的疊加，其權重都不會高於id選擇器。
