我们可以使用 CSS 自定义属性从父元素继承值吗?
我们可以在 CSS 自定义属性中存储继承的值吗?
在 CSS 中,自定义属性(也称为 CSS 变量)提供了一种在整个过程中存储和重用值的便捷方法一份文件。但是,这些变量可以从其父元素继承值吗?
让我们考虑一个示例代码:
:root { --color: rgba(20, 20, 20, 0.5); /* Default value */ } .box { width: 50px; height: 50px; background: var(--color); } .red { background: rgba(255, 0, 0, 0.5); } .blue { background: rgba(0, 255, 255, 0.5); } .box:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transform: translateX(30px); background: var(--color); filter: invert(1); }
在这个示例中,我们要继承 .box 元素的背景颜色它的 :before 伪元素使用 CSS 变量。但是, --color 变量是在 :root 级别定义的,并且 :before 伪元素嵌套在 .box 中。
设置背景:在 :before 上继承不起作用,因为自定义属性优先
解决方案:初始值回退
要将继承值存储在 CSS 变量中,我们可以利用 CSS 初始值作为回退。初始值表示属性的默认或未设置状态。
在我们的例子中,我们可以按如下方式修改代码:
.box:before { ... background: var(--color, initial); ... }
通过指定初始值作为 var( --color),当 --color 未显式设置时,我们强制使用继承的值。这允许我们从父元素继承背景颜色。
为了演示这一点,让我们将 .box 的背景颜色设置为灰色。即使在这种情况下我们没有显式定义 --color,由于初始值回退, :before 伪元素仍然会继承 .box 的背景颜色。
.box { background: gray; --color: initial; }
以上是我们可以使用 CSS 自定义属性从父元素继承值吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

您是否曾经在项目上需要一个倒计时计时器?对于这样的东西,可以自然访问插件,但实际上更多

格子呢是一块图案布,通常与苏格兰有关,尤其是他们时尚的苏格兰语。在Tartanify.com上,我们收集了5,000多个格子呢

我关注的一件事是Lea Verou' s conic-Gradient()Polyfill的功能列表是最后一项:
