我们可以使用 CSS 自定义属性从父元素继承值吗？-css教程-PHP中文网

我们可以使用 CSS 自定义属性从父元素继承值吗？

Patricia Arquette

发布： 2024-11-13 14:29:02

原创

341 人浏览过

Can We Use CSS Custom Properties to Inherit Values From Parent Elements?

我们可以在 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中文网其他相关文章！