為什麼我的巢狀 CSS 作用域自訂屬性被忽略？

巢狀聲明中忽略CSS 作用域自訂屬性

在CSS 中定義自訂屬性時，必須了解作用域如何影響其評估。作用域自訂屬性僅在定義它們的元素或元件中本地可用。然而，當嘗試在外部作用域中使用作用域自訂屬性時，會出現一個常見的挑戰。

在這種特定情況下，目標是透過自訂屬性定義比例因子並將其應用於不同的元素。但是，如圖所示，無論應用的縮放類別如何，所有清單元素都會同等縮放。

要解決此問題，請務必注意自訂屬性是從上到下評估的。當在根層級定義自訂屬性時，如本例所示，嵌套元素中相同屬性的任何後續定義都將被忽略。

考慮這個簡化的插圖：

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

此處，自訂屬性 --color 是在根層級定義的。如果我們嘗試在 span 元素內覆寫它：

<div>
  <div class="box">
    <span>

具有嵌套 CSS 聲明的 span 元素不會變成紅色。這是因為自訂屬性已經在根層級進行了評估，將 --color 設為藍色，並且覆蓋嘗試將被忽略。

相反，具有繼承的 --c: red 的 span 元素將變成紅色，因為它從其父元素繼承了自訂屬性值。

為了達到所需的效果，有必要確保在每個巢狀元件中單獨評估自訂屬性。這可以透過在每個類別或元件中本地定義屬性來完成，而不是在根層級定義屬性。

以上是為什麼我的巢狀 CSS 作用域自訂屬性被忽略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！