什么是 inherit?
在 CSS 中,inherit 是一个全局关键字,用于显式地让某个属性继承其父元素的计算值。
即使该属性默认不继承(如 border、margin 等),也可以通过 inherit 强制继承。
基本用法示例
下面是一个使用 color: inherit 的例子:
.parent {
color: #e74c3c;
}
.child {
color: inherit; /* 将继承父级的红色 */
}
这是父容器(红色文字)
这是子元素(继承红色)
“变形”场景:非继承属性也能继承
某些 CSS 属性(如 border、background)默认不继承,但通过 inherit 可以实现“变形”效果。
.grandparent {
border: 3px solid #2ecc71;
}
.parent {
border: inherit; /* 继承祖父的边框! */
}
祖父元素(绿色边框)
父元素(通过 inherit 继承了边框)
交互演示:动态切换 inherit
点击按钮,观察子元素颜色如何响应父元素的变化。
父元素(当前紫色)
子元素(继承父颜色)