web前端基礎：CSS繼承和層疊

CSS繼承

從父元素那繼承部分CSS屬性；
• 可以定義多個樣式
• 不衝突時，多個樣式可層疊爲一個
• 衝突時，按不同樣式規則優先級來應用樣式
樣式繼承關係

樣式屬性	繼承	說明
width height	不繼承	塊級元素、替換元素 對於樣式屬性，通過設置值爲inherit，指從父元素繼承相對屬性值。例：div{padding:10px;}div p{padding:inherit;}
padding	不繼承
margin	不繼承
border	不繼承

CSS優先級

CSS使用方法優先級：
行內樣式>內部樣式>外部樣式
說明：

1. 鏈入外部樣式表與內部樣式表之間的優先級取決於所處位置的先後
2. 最後定義的優先級最高（就近原則）
   CSS優先級規則:
   同一樣式表中：
3. 權值相同
   就近原則（離被設置元素越近優先級越高）
4. 權值不同
   根據權值來判斷CSS樣式，
   哪種CSS樣式權值高，就使用哪種樣式
   選擇器權值
   • 標籤選擇器：權值爲1
   • 類選擇器和僞類：權值爲10
   • ID選擇器：權值爲100
   • 通配符選擇器：權值爲0
   • 行內樣式：權值爲1000
   權值規則
   • 統計不同選擇器的個數
   • 每類選擇器的個數乘以相應權值
   • 把所有的值相加得出選擇器的權值

#main div.warning h2{…}

id :1 class:1 標籤：2
1100=100 110=10 2*1=2
權值：100+10+2=112

！important規則
• 可調整樣式規則的優先級
• 添加在樣式規則之後，中間用空格隔開

div{corlor:red !important;}

CSS優先級總結
• !important聲明高
• CSS使用方法的優先級
行內樣式>內部樣式>外部樣式
注：link鏈入外部樣式和style內部樣式優先級，取決於先後順序。
• 樣式表中優先級
Id選擇器>class選擇器>標籤選擇器>通配符

權值相同	權值不同
就近原則	權值高的