繼承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中文網其他相關文章！
