inherit

inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何CSS属性，包括CSS简写all。

对于继承属性，inherit关键字只是增强了属性的默认行为，只有在重载(overload)其它规则的时候被使用。对于非继承属性，inherit这指定的行为通常没有多大意义，一般使用使用initial或unset作为替代。

继承始终来自文档树中的父元素，即使父元素不是包含块。

示例

/* 设置二级标题的颜色为绿色 */
h2 { color: green; }

/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; } 

浏览器支持

inherit关键字

• 由于CSS的级联性质，一些CSS属性会自动从元素的父级继承它们的值。例如设置元素的文本颜色，则该元素的所有后代将继承相同的文本颜色。即使某些属性值是自动继承的，也可能存在增加继承属性权重的情况。在这种情况下，使用inherit默认情况下已经继承父值的属性上的值将强制继承父值。
• 通过inherit关键字强制执行自动继承的值的一种情况是用户代理的样式表覆盖继承的值（浏览器将某些元素应用的默认样式）
  例如，文本的color值会自动传递给元素的所有后代，但在a链接的情况下，该color属性通常在用户代理样式表中设置为蓝色。在大多数情况下，可以为链接应用不同的颜色，或者是继承与文本其余部分相同的颜色，并可能应用另一个表明它们是链接的视觉效果（例如应用下划线或背景颜色等）。假设希望链接具有与文本其余部分相同的文本颜色，则可以使用该inherit值来强制执行通常会继承的颜色值。
• 某些CSS属性不会继承元素父级的计算值，但是我们希望将元素的属性值设置为与其父级的值相同。在这种情况下inherit关键字就派上用场了，它允许不自动继承值的属性继承它。
  例如，为元素设置了蓝色边框，并且希望其所有子元素，具有相同的边框，那么就可以设置inherit关键字让它们继承与父元素相同的边框颜色。
• inherit关键字不支持简写属性，它必须是声明中的唯一值，比如border: 1px solid inherit就不会从父元素继承边框颜色，因为它无法识别值继承所引用的子属性。但是它可以通过border:inherit来继承

语法

property:inherit;

例子

/* 设置二级标题的颜色为绿色 */
h2 { color: green; }

/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; }

在下面这个例子中，如果sidebar 中h2元素的div匹配下面的规则的话，颜色会变成蓝色。

div#current { color: blue; }

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com