如何使用具有後備功能的 CSS 變數繼承值？

如何繼承CSS 變數中的值

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