[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)