在 CSS 中，自訂屬性（也稱為 CSS 變數）提供了一種在整個過程中儲存和重複使用值的便捷方法一份文件。但是，這些變數可以從其父元素繼承值嗎？
讓我們考慮一個範例程式碼：
:root {
--color: rgba(20, 20, 20, 0.5); /* Default value */
}
.box {
width: 50px;
height: 50px;
background: var(--color);
}
.red {
background: rgba(255, 0, 0, 0.5);
}
.blue {
background: rgba(0, 255, 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);
filter: invert(1);
}在這個範例中，我們要繼承 .box 元素的背景顏色它的 :before 偽元素使用 CSS 變數。但是， --color 變數是在 :root 層級定義的，並且 :before 偽元素嵌套在 .box 中。
設定背景：在:before 上繼承不起作用，因為自訂屬性優先
要將繼承值儲存在CSS 變數中，我們可以利用CSS 初始值作為後備。初始值表示屬性的預設或未設定狀態。
在我們的例子中，我們可以如下修改程式碼：
.box:before {
...
background: var(--color, initial);
...
}透過指定初始值作為var( --color)，當--color 未明確設定時，我們強制使用繼承的值。這允許我們從父元素繼承背景顏色。
為了示範這一點，讓我們將 .box 的背景顏色設為灰色。即使在這種情況下我們沒有明確定義 --color，由於初始值回退， :before 偽元素仍然會繼承 .box 的背景顏色。
.box {
background: gray;
--color: initial;
}以上是我們可以使用 CSS 自訂屬性從父元素繼承值嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
