為什麼作用域 CSS 自訂屬性無法覆寫繼承值？

作用域CSS 自訂屬性：覆寫繼承值

使用CSS 自訂屬性時，定義它們的作用域會影響其行為。在這種情況下，作用域自訂屬性用於根據外部作用域中定義的變數來縮放大小。然而，並沒有達到預期的效果，因為所有三個清單都以相同的比例顯示。

理解範圍問題

用-- 定義的自訂屬性不是嵌套在其他規則中的規則被視為全域範圍的，並影響文件中的所有元素。但是，當在嵌套規則中定義自訂屬性時，它的作用域將限於該規則及其後代。這意味著該規則之外的任何元素都不會繼承自訂屬性的值。

重設自訂屬性

在提供的程式碼中，根元素定義 - -scale 自訂屬性並根據它計算 --size-* 值。隨後，子元素定義自己的 --scale 自訂屬性。這會導致子元素覆蓋從根元素繼承的 --scale 值。

要解決此問題，需要將子元素中的 --scale 自訂屬性重設為新值，該值將在用於計算。透過這樣做，自訂屬性的範圍有效地限定為子元素及其後代。

更新的程式碼

以下是包含修復的程式碼的更新版本：

: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);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }

html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

以上是為什麼作用域 CSS 自訂屬性無法覆寫繼承值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！