欢迎来到计算机相关教程网!

CSS

当前位置: 主页 > 网页制作 > CSS

css中的inherit用法详解

时间:2022-09-15 17:00:13|栏目:CSS|点击:

  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;

 

  }

 


  注意:inherit关键字不支持简写属性,它必须是声明中的唯一值,比如border:1pxsolidinherit就不会从父元素继承边框颜色,因为它无法识别值继承所引用的子属性。但是它可以通过border:inherit来继承


上一篇:animation之钟表指针移动案例

栏    目:CSS

下一篇:暂无

本文标题:css中的inherit用法详解

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=248

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有 Powered by EyouCms冀ICP备17010187号