CSS 變量，也稱為自訂屬性，允許我們以可以在整個專案中重複使用的方式儲存和操作值。樣式表。然而，CSS 變數的一個限制是它們無法從其父元素繼承值。
例如，請考慮以下程式碼：
:root {
--color: rgba(20, 20, 20, 0.5); /* Default value */
}
.box {
width: 50px;
height: 50px;
display: inline-block;
margin-right: 30px;
border-radius: 50%;
position: relative;
}
.red {
background: rgba(255, 0, 0, 0.5);
}
.blue {
background: rgba(0, 255, 0, 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);
}在此程式碼中，我們有一個:root 規則，它定義了一個預設值為rgba( 20, 20, 20, 0.5) 的--color 變數。我們還有一個 .box 類，用於為矩形元素設定一些樣式，以及一個 :before 偽元素，用於在框內建立圓形元素。
設定 :before 偽元素的背景屬性到 var(--color)，這表示它將繼承 --color 變數的值。但是，我們可以使用內聯樣式覆寫每個框的--color 變數的值，如下例所示：
<div class="box red">
前兩個框的--color 變數設定為分別為rgba(0 , 255, 0, 0.5) 和rgba(0, 255, 255, 0.5)，而第三個框將嘗試從其父級繼承--color 變數元素。然而，正如我們之前提到的，CSS 變數不能繼承值，因此第三個框的 --color 變數將保留其預設值 rgba(20, 20, 20, 0.5)。
var() 函數提供了一種為 CSS 變數定義回退值的方法，以防變數未定義或設定為其初始值。後備值被指定為var() 函數的第二個參數，如下例所示：
background: var(--color, inherit);
在此範例中，如果--color 變數未定義或設定為其初始值時，background屬性將繼承父元素的顏色。這正是我們在這種情況下想要的行為。
這是添加了後備值的更新代碼：
:root {
--color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}
.box {
width: 50px;
height: 50px;
display: inline-block;
margin-right: 30px;
border-radius: 50%;
position: relative;
}
.red {
background: rgba(255, 0, 0, 0.5);
}
.blue {
background: rgba(0, 0, 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, inherit);
filter: invert(1);
}現在，所有三個框都將繼承其父框的顏色元素，即使在內聯樣式中將-- color 變數設定為不同的值。
以上是如何使用具有後備功能的 CSS 變數繼承值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
