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

在CSS 變數中儲存繼承值

在CSS 中，我們常會遇到根據繼承值操作屬性的需求，例如繼承元素的背景色為其偽元素。但是，在 CSS 變數中使用繼承關鍵字並不總是能按預期工作。

問題

考慮這個簡化的例子：

在這種情況下，我們向.box 元素添加一個偽元素(::before) 並將其背景屬性設定為使用--color CSS 變數。但是，如果我們希望偽元素使用inherit關鍵字繼承.box的背景顏色，它將無法按預期工作。

解

將繼承的值儲存在CSS 變量，我們可以使用屬性的後備值。回退值被指定為 var() 函數的第二個參數。例如：

藉由這樣做，我們告訴背景屬性在未定義 --color 變數的情況下使用繼承作為後備值。

但是，在我們的例子中，這是行不通的，因為 --color 總是在 :root 層級定義。為了解決這個問題，我們可以使用初始值來取消定義我們的自訂屬性，並強制使用回退值：

初始值將CSS 變數設定為其初始值，該值是一個空值價值。當 CSS 變數具有初始值時，var() 會將其視為具有後備值。

透過使用這種方法，我們可以將繼承的值儲存在 --color CSS 變數中，並將其有效地用於偽元素的背景屬性。

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