[TOC] # 簡介 在css中，每個[CSS 屬性定義](https://developer.mozilla.org/zh-CN/docs/CSS/CSS_Reference)的概述都指出了這個屬性是默認繼承的("Inherited: Yes") 還是默認不繼承的("Inherited: no")。這決定了當你沒有為元素的屬性指定值時該如何計算值。 <br> <br> # 繼承屬性 當元素的一個繼承屬性 (inherited property)沒有指定值時，則取父元素的同屬性的計算值（computed value）。只有文檔根元素取該屬性的概述中給定的初始值（initial value）（這里的意思應該是在該屬性本身的定義中的默認值）。 <br> 繼承屬性的一個典型例子就是 color 屬性。給出以下樣式規則： ~~~ p { color: green; } ~~~ 若將其應用在下面這段 HTML 代碼上… ~~~ <p>This paragraph has <em>emphasized text</em> in it.</p> ~~~ 文本 "emphasized text" 就會呈現為綠色，因為 em 元素繼承了 p 元素 color 屬性的值，而沒有獲取 color 屬性的初始值（這個 color 值用于頁面沒有指定 color 時的根元素）。 <br> <br> # 非繼承屬性 當元素的一個非繼承屬性(在Mozilla code 里有時稱之為reset property )沒有指定值時，則取屬性的初始值 initial value（該值在該屬性的概述里被指定）。 <br> 非繼承屬性的一個典型例子就是 border 屬性。給出以下樣式規則： ~~~ p { border: medium solid; } ~~~ <br> 若將其應用在下面這段 HTML 代碼 ~~~ <p>This paragraph has <em>emphasized text</em> in it.</p> ~~~ 文本 "emphasized text" 就沒有邊框，因為 border-style 屬性的初始值為none。 <br> inherit 關鍵字允許顯式的聲明繼承性，它對繼承和非繼承屬性都生效。 <br> 可以使用 all 簡寫屬性一次控制所有屬性的繼承，該屬性將其值應用于所有屬性，例如: ~~~ font: { all: revert; font-size: 200%; font-weight: bold; } ~~~ <br> 這會將 font 屬性的樣式恢復為用戶代理（瀏覽器）的默認值，除非存在用戶樣式表，在這種情況下使用該樣式表。然后它將字體大小加倍并應用 font-weight 屬性 為"bold"。 <br> <br> # 相關屬性 ## inherit inherit 關鍵字使得元素獲取其父元素的計算值。它可以應用于任何CSS屬性，包括CSS簡寫 all。 <br> 對于繼承屬性，inherit 關鍵字只是增強了屬性的默認行為，只有在重載(overload)其它規則的時候被使用。對于非繼承屬性，inherit 這指定的行為通常沒有多大意義，一般使用使用 initial 或 unset 作為替代。 <br> 繼承始終來自文檔樹中的父元素，即使父元素不是包含塊。 <br> ## initial initial CSS關鍵字將屬性的初始（或默認）值應用于元素。不應將初始值與瀏覽器樣式表指定的值混淆。它可以應用于任何CSS屬性。這包括CSS簡寫all，initial 可用于將所有CSS屬性恢復到其初始狀態。 > IE不支持 <br> ## unset 如果 unset 的CSS關鍵字從其父級繼承，則將該屬性重新設置為繼承的值，如果沒有繼承父級樣式，則將該屬性重新設置為初始值。換句話說這個unset關鍵字會優先用 inherit 的樣式，其次會應該用initial的樣式。它允許應用任意的CSS樣式，包括CSS縮寫 all 關鍵字。 > IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持 <br> 繼承屬性 color ~~~html <p>This text is red.</p> <div class="foo"> <p>This text is also red.</p> </div> <div class="bar"> <p>This text is green (default inherited value).</p> </div> ~~~ <br> ~~~css .foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { color: unset; } ~~~ <br>  <br> 非繼承屬性 border ~~~css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-color: unset; } ~~~ <br> ~~~html <p>This text has a red border</p> <div> <p>This text has a red border</p> </div> <div class="bar"> <p>This text has has a black border (initial default, not inherited)</p> </div> ~~~ <br>  <br> ## revert 表示樣式表中定義的元素屬性的默認值。若用戶定義樣式表中顯式設置，則按此設置；否則，按照瀏覽器定義樣式表中的樣式設置；否則，等價于unset 。 > 只有safari9.1+和ios9.3+支持 ~~~html <section> <p>This is a section!</p> <aside class="widget"> <p>This is a little widget.</p> </aside> </section> ~~~ <br> ~~~css section { color: blue; font-family: sans-serif; font-weight: bold; } .widget { all: revert; } ~~~ <br>  <br> <br> # 可繼承及不可繼承屬性 ## 無繼承性的屬性 * display：規定元素應該生成的框的類型 * 文本屬性： * vertical-align：垂直文本對齊 * text-decoration：規定添加到文本的裝飾 * text-shadow：文本陰影效果 * white-space：空白符的處理 * unicode-bidi：設置文本的方向 * 盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left * 背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment * 定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index * 生成內容屬性：content、counter-reset、counter-increment * 輪廓樣式屬性：outline-style、outline-width、outline-color、outline * 頁面樣式屬性：size、page-break-before、page-break-after * 聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during <br> ## 有繼承性的屬性 * 字體系列屬性 * font：組合字體 * font-family：規定元素的字體系列 * font-weight：設置字體的粗細 * font-size：設置字體的尺寸 * font-style：定義字體的風格 * font-variant：設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。 * font-stretch：對當前的font-family 進行伸縮變形。所有主流瀏覽器都不支持。 * font-size-adjust：為某個元素規定一個aspect 值，這樣就可以保持首選字體的 x-height。 * 文本系列屬性 * text-indent：文本縮進 * text-align：文本水平對齊 * line-height：行高 * word-spacing：增加或減少單詞間的空白（即字間隔） * letter-spacing：增加或減少字符間的空白（字符間距） * text-transform：控制文本大小寫 * direction：規定文本的書寫方向 * color：文本顏色 * 元素可見性：visibility * 表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout * 列表布局屬性：list-style-type、list-style-image、list-style-position、list-style * 生成內容屬性：quotes * 光標屬性：cursor * 頁面樣式屬性：page、page-break-inside、windows、orphans * 聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation <br> ## 所有元素可以繼承的屬性 * 元素可見性：visibility * 光標屬性：cursor <br> ## 內聯元素可以繼承的屬性 * 字體系列屬性 * 除text-indent、text-align之外的文本系列屬性 <br> ## 塊級元素可以繼承的屬性 * text-indent、text-align <br> <br> # 參考資料 [MDN - inherit](https://developer.mozilla.org/zh-CN/docs/Web/CSS/inherit) [CSS中可以和不可以繼承的屬性](http://www.cnblogs.com/thislbq/p/5882105.html)