Inheritance Rules
概述
編輯
網頁瀏覽器加載一個頁面的流程可以理解為：首先解析html數據形成文檔樹，然後搜索所有樣式源；對選擇器可適用的頁面標記，按照樣式被發現的順序把樣式屬性附加到標記上形成一個屬性隊列。
樣式聲明具有!Important關鍵字的，被稱為「重要性聲明」，優先於普通樣式。網頁瀏覽器按照不同的重要性聲明把每個標記的屬性隊列分為5個重要性層次或稱重要性級別，如下圖，rank 1具有最低優先級，rank 5具有最高優先級。
| rank 1 | 瀏覽器預設樣式 User Agent (UA)樣式表中的，或者等價實現的 |
| rank 2 | 用戶的普通樣式聲明 在用戶樣式表中沒有!Important標記的內容。從特定站點和內建樣式表的普通聲明也可以合併到這裡 |
| rank 3 | 作者的普通樣式聲明 作者的設定中沒有!Important標記的內容。 包含文件頭部、連結樣式表、內聯樣式。 |
| rank 4 | 作者的!Important樣式聲明 Style Declarations 作者設定的帶有!Important標記的內容。 包含文件頭部、連結樣式表、內聯樣式。 |
| rank 5 | 用戶的!Important樣式聲明 用戶的樣式表中帶有!Important標記的內容. 來自特定站點和內聯樣式表中帶有!Important聲明的內容也可併入. |
對同一標記上同一屬性的同一重要性級別的樣式，再比較其特殊性（specifity），再比較源位置（後發現的優先）。
為了讓瀏覽器正常運行，每個屬性都必須有一個值，該值對於該元素的格式設置是必不可少的。瀏覽器用其默認操作填補了巨量的缺失屬性值。對於每個缺失的基本屬性，它首先嘗試從父元素繼承一個合適的值，即從它周圍的標籤中繼承；如果由於某種原因這不可能，瀏覽器會分配一個初始值。屬性初始值在設計時在屬性定義列表中預設。應用這些默認值的結果是為正在考慮的每個標籤生成一組全面的指定值，其中包括所需的每個屬性。下一個階段是從指定的值中生成計算值，此時它們被稱為實際值。
樣式聲明的重要性越高，就越需要注意縮小它們的特異性，以免它們在範圍內變得過於霸道。
計算Specificity
編輯對於樣式選擇器，計算specificity的規則為：
- 通用選擇器(*)或繼承的值，總specificity增加0
- 對於內聯樣式，總specificity增加1000
- 對於ID選擇器，總specificity增加100
- 對於類選擇器、擬類選擇器或屬性選擇器，總specificity增加10.
- 對於簡單標記選擇器或擬元素選擇器，總specificity增加1
p { }
|
Total=1 |
div p { }
|
Total=2 |
p.topsection { }
|
Total=11 |
#toppara { }
|
Total=100 |
div table p#green { }
|
Total=103 |
style="float:left;"
|
Total=1000 |
a:hover { }
|
Total=11 |
p:first-line { }
|
Total=2 |
p[title] { }
|
Total=11 |
樣式的繼承
編輯樣式的繼承意味著在沒有為子元素指定合適的樣式時使用來自父元素的樣式。樣式的繼承發生在級聯之後，在可能的情況下填充缺失的屬性值，當無法完成時，通過應用初始值，CSS 屬性本身的默認值。請注意以下幾點：
- 繼承從父元素到子元素（如果有的話）發生，並且可以轉移到任何嵌套深度，其中一個的子元素成為下一個的父元素。
- 如果子元素具有為其指定的相關樣式，則父元素不能通過繼承將樣式傳遞給它。
- 如果 HTML 屬性作為相關樣式存在於子元素中，它甚至可以阻止繼承。這是因為屬性被賦予等效的 CSS 格式以在級聯中起作用。他們在瀏覽器樣式表中這樣做。
- CSS 屬性的初始值不參與級聯。在級聯之後，如果沒有指定樣式，則嘗試通過繼承來解決問題，如果仍然無法解決，則使用 CSS 屬性定義表中找到的初始值。可能採用初始值的原因包括：
- 該屬性未指定，在任何情況下都不能被繼承
- 屬性值存在，但它的值設置為 initial