如何在 CSS 變數中儲存繼承值？

繼承CSS 變數中的值

在CSS 領域，自訂屬性（也稱為CSS 變數）提供了巨大的靈活性和控制能力風格。當我們想要在變數中儲存繼承值時，就會出現一個常見問題。讓我們深入研究解決方案。

挑戰

考慮以下程式碼：

:root {
  --color:rgba(20,20,20,0.5);
}

.box {
  --color: inherit;
  background: var(--color);
}

在這裡，我們的目標是讓背景繼承來自 :root 元素的顏色。但是，由於繼承規則，使用繼承作為 --color 的值不起作用。

解決方案：後備值與初始關鍵字

儲存繼承的值，我們可以利用 CSS 變數的後備值特性。我們可以設定：

background: var(--color, inherit);

這告訴瀏覽器如果未定義 --color 則使用繼承。但是，由於 --color 始終在 :root 層級定義，因此它不會使用後備。

為了解決這個問題，我們可以使用初始關鍵字將--color 重設為其初始值：

.box {
  --color: initial;
  background: var(--color, inherit);
}

使用初始有效地取消設定自訂屬性，從而允許繼承生效。此程式碼將成功從 :root 元素繼承顏色。

以上是如何在 CSS 變數中儲存繼承值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！