CSS中的inherit关键字有什么用【html5教程】

类别：HTML / 日期：2019-11-29 / 浏览：202 / 评论：0

CSS中的inherit关键字的作用是让子女元素的CSS款式能够从父元素或许先人元素那继续它们的值，而且它能够运用于任何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关键字有什么用的细致内容，更多请关注ki4网别的相干文章！

打赏