CSS 作用域自訂屬性如何處理繼承和覆寫？

CSS 作用域自訂屬性：了解作用域與繼承

定義CSS 自訂屬性時，了解其作用域對於實作所了解其作用域對於實作所定義需效果至關重要。元素內聲明的自訂屬性的範圍僅限於該元素及其後代。然而，這種範圍有時會導致意外的行為，如本問題所示。

問題源自於以下事實：在提供的程式碼中，自訂屬性 --scale 在根層級定義，然後被覆蓋在子元素內。使用作用域自訂屬性時，不會出現這種覆寫行為。

為了示範這個問題，讓我們分析 CSS：

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.scale-1x {
  --scale: 1;
}

.scale-2x {
  --scale: 2;
}

.scale-3x {
  --scale: 3;
}

這裡， --size-* 屬性取決於值的--規模。但是，在 .scale-1x、.scale-2x 和 .scale-3x 類別中定義 --scale 時，它會覆寫 :root 中定義的值。

預期的行為是 --在定義它的每個元素處評估縮放屬性，從而導致每個列表的字體大小不同。但是，這種情況不會發生，因為自訂屬性已在根層級進行評估。

要解決此問題並達到所需的效果，請考慮更一致地使用作用域自訂屬性。例如，在每個 .scale-* 類別中定義 --size-1、--size-2 和 --size-3，確保它們的範圍僅限於該元素。這將允許根據各自類別中定義的 --scale 值對每個清單進行獨立縮放。

以上是CSS 作用域自訂屬性如何處理繼承和覆寫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！