首頁 > web前端 > css教學 > 如何在 CSS 變數中儲存繼承值?

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

Barbara Streisand
發布: 2024-11-17 05:47:03
原創
879 人瀏覽過

How Do You Store Inherited Values in CSS Variables?

在CSS 變數中儲存繼承值

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

問題

考慮這個簡化的例子:

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

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

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

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

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板