什麼是繼承？
要想瞭解css樣式表的繼承，我們先從文檔樹（HTML DOM）開始。文檔樹由HTML元素組成。
文檔樹和家族樹類似，也有祖先、後代、父親、孩子和兄弟^_^。這很容易理解吧，筆者在這裡就不一一贅述了。希望深入瞭解的朋友請google之。
那麼CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。
下面舉個例子，有如下html程式碼片段：
<p>
CSS樣式表<em>繼承特性</em>的示範代碼
</p>
需要注意的是em是包含在p之內的。
當我們指定p的css樣式時，看看em會有什麼變化呢？
<style>
p { color:red; }
</style>
在瀏覽器中p 和 em 字型同時變紅。我們並沒有指定em的樣式，但em繼承了它的父親元素p的樣式特性。
也許各位看了以後覺得這是理所當然的，根本不值一哂^_^。其實，這就是繼承。在不知不覺中影響這我們的代碼（想像一下如果沒有繼承特性，你就需要為每一個元素定義顏色屬性，這是多麼痛苦的一件事情！！！=_=!）。
當然也不是所有的css屬性都會被子類繼承，例如border屬性。繼續利用上面的一段代碼。我們為p元素添加border屬性
p { border: 1px solid red; }
還好，p的border屬性沒有被em繼承，否則是不是怪怪的呢？！^_^
那麼，哪些屬性是可以繼承的呢？css樣式表屬性可以繼承的有如下：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
嚇？！這麼多？！怎麼記得住呢？別急，我們來理一理這些屬性。
文本相關屬性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
列表相關屬性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
還有一個屬性比較重要，color屬性。
值得一說的是font-size。很顯然font-size是可以被繼承的。但是它的方式有一些特別。Font-size的子類繼承的不是實際值，而是計算後的值。下面解釋下為什麼font-size會這麼特別呢？
看一個例子：
<p>
字型大小屬性<em>繼承特性</em>的示範代碼
</p>
為p定義字型大小為預設字型的80％。
p { font-size:80%}
如果font-size繼承的是相對值，那麼結果會怎麼樣呢？依照這樣的邏輯，em的font-size為80％X80％=64%，網頁看起來應該是這樣的。
但，實際情況卻不是如此。em內的文字並沒有改變大小，而是和p保持一致。
下面舉三個例子，讓各位有個直觀的認識
p { font-size:14px;}
由於瀏覽器預設字型大小是16px，而p定義了字型14px，所以em繼承了p的字型大小屬性，也是14px；
| 元素 | 值 | 計算後的值 |
|---|---|---|
| 預設字型大小 | 約16像素 | |
| <body> | 未指定 | 約16px |
| <p> | 14px | 14px |
| <em> | 未指定 | 繼承值=14px |
p { font-size:85%;}
瀏覽棋預設字型大小16px,而p定義了字型大小(16px X 85% = 13.6px). 13.6px這個值將被子項目em繼承。
| 元素 | 值 | 計算後的值 |
|---|---|---|
| 預設字型大小 | 約16像素 | |
| <body> | 未指定 | 約16px |
| <p> | 85% | 16px X 85% = 13.6px |
| <em> | 未指定 | 繼承值=13.6px |
p { font-size:0.85em;}
瀏覽棋預設字型大小16px,而p定義了字型大小(16px X 0.85em = 13.6px). 13.6px這個值將被子項目em繼承。
| 元素 | 值 | 計算後的值 |
|---|---|---|
| 預設字型大小 | 約16像素 | |
| <body> | 未指定 | 約16px |
| <p> | 0.85em | 16px X 0.85em= 13.6px |
| <em> | 未指定 | 繼承值=13.6px |
上面的例子都比較簡答，再來個複雜的
body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
瀏覽棋預設字型大小16px,而body定義了字型大小(16px X 85% = 13.6px). 如果子項目沒有指定字型大小13.6px這個值將被子項目繼承。
| 元素 | 值 | 計算後的值 |
|---|---|---|
| 預設字型大小 | 約16像素 | |
| <body> | 85% | 16px X 85% = 13.6px |
| <h1> | 200% | 繼承值＝13.6px X 200%= 27.2px |
| <h2> | 150％ | 繼承值＝13.6px X 150%= 20.4px |
| <p> | 未指定 | 繼承值=13.6px |
| <em> | 未指定 | 繼承值=13.6px |
說到這裡，CSS樣式表的繼承基本上講完了。在實踐中，還有一個特性值需要解釋一下，這和繼承的應用也是息息相關的。
樣式表中的特性值描述了不同規則的相對權重，它的基本規則是：
◆統計選擇符中的ID屬性個數。
◆統計選擇符中的CLASS屬性個數。
◆統計選擇符中的HTML標記名格式。
最後，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位元。(注意，你需要將數字轉換成一個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性淩駕於較低數位。
以下是一個按特性分類的選擇符的列表：
H1{color:blue;} 特性值為：1
PEM{color:purple;} 特性值為：2
.apple{red;} 特性值為：10
P.bright{color:yellow;} 特性值為：11
P.brightEM.dark{color:brown;} 特性值為：22
#id316{color:yellow} 特性值為：100
從上表我們可以看出#id316具有更高的特殊性，因而它有更高的權重。當有多個規則都能應用於同一個元素時，權重越高的樣式將被優先採用。而繼承屬性的特性值為0；也就是說，任何一條與css繼承值衝突的屬性值都會覆蓋繼承的屬性值！！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
