文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中的inherit关键字怎么用

2024-04-02 19:55

关注

本文小编为大家详细介绍“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关键字怎么用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯