我們可以使用 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中文網其他相關文章！