CSS中的inherit关键字怎么用

本文小编为大家详细介绍“CSS中的inherit关键字怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS中的inherit关键字怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　inherit关键字

　　由于CSS的级联性质，一些CSS属性会自动从元素的父级继承它们的值。例如设置元素的文本颜色，则该元素的所有后代将继承相同的文本颜色。即使某些属性值是自动继承的，也可能存在增加继承属性权重的情况。在这种情况下，使用inherit默认情况下已经继承父值的属性上的值将强制继承父值。

　　通过inherit关键字强制执行自动继承的值的一种情况是用户代理的样式表覆盖继承的值（浏览器将某些元素应用的默认样式）

　　例如，文本的color值会自动传递给元素的所有后代，但在a链接的情况下，该color属性通常在用户代理样式表中设置为蓝色。在大多数情况下，可以为链接应用不同的颜色，或者是继承与文本其余部分相同的颜色，并可能应用另一个表明它们是链接的视觉效果（例如应用下划线或背景颜色等）。假设希望链接具有与文本其余部分相同的文本颜色，则可以使用该inherit值来强制执行通常会继承的颜色值。

　　div{

　　color:pink;

　　}

　　a{

　　color:inherit;

　　}

　　某些CSS属性不会继承元素父级的计算值，但是我们希望将元素的属性值设置为与其父级的值相同。在这种情况下inherit关键字就派上用场了，它允许不自动继承值的属性继承它。

　　例如，为元素设置了蓝色边框，并且希望其所有子元素div具有相同的边框，那么就可以设置inherit关键字让它们继承与父元素相同的边框颜色。

　　.el{

　　padding:10px;

　　border:5pxsolid#0099cc;

　　}

　　.child{

　　padding:10px;

　　margin-top:20px;

　　border:inherit;

　　}

　　.el-2{

　　margin-top:30px;

　　border:5pxsolidhotpink;

　　}

　　.child-2{

　　border:5pxsolidinherit;

　　margin-top:20px;

　　}

读到这里，这篇“CSS中的inherit关键字怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网JavaScript频道。