CSS中inherit关键字的作用

小编给大家分享一下CSS中inherit关键字的作用，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

10年的铜陵网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整铜陵建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“铜陵网站设计”,“铜陵网站推广”以来，每个客户项目都认真落实执行。

CSS中的inherit关键字的作用是让后代元素的CSS样式可以从父元素或者祖先元素那继承它们的值，并且它可以应用于任何CSS属性

inherit关键字

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

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

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

div{
			color:pink;
		}
		a{
			color:inherit;
		}

效果图：

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

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

.el {
  padding:10px;
  border: 5px solid #0099cc;
}

.child {
	padding:10px;
  margin-top: 20px;
  border: inherit;
}

.el-2 {
  margin-top: 30px;
  border: 5px solid hotpink;
}

.child-2 {
  border: 5px solid inherit;
  margin-top: 20px;
}

效果图：

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

看完了这篇文章，相信你对CSS中inherit关键字的作用有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

文章标题：CSS中inherit关键字的作用
URL标题：https://www.cdcxhl.com/article4/pdepoe.html

成都网站建设公司_创新互联，为您提供定制网站、App开发、营销型网站建设、小程序开发、商城网站、云服务器

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联