スコープ指定された CSS カスタム プロパティが継承値をオーバーライドできないのはなぜですか?

スコープ付き CSS カスタム プロパティ: 継承値のオーバーライド

CSS カスタム プロパティを操作する場合、定義されているスコープはその動作に影響します。この場合、スコープ付きカスタム プロパティは、外側のスコープで定義された変数に基づいてサイズを調整するために使用されます。ただし、3 つのリストすべてが同じ縮尺で表示されるため、期待した効果は得られません。

スコープの問題を理解する

で定義されたカスタム プロパティ -- ではありません。他のルール内にネストされているルールはグローバルにスコープされているとみなされ、ドキュメント内のすべての要素に影響します。ただし、カスタム プロパティがネストされたルール内で定義されている場合、カスタム プロパティのスコープはそのルールとその子孫になります。これは、そのルールの外にある要素はカスタム プロパティの値を継承しないことを意味します。

カスタム プロパティのリセット

提供されたコードでは、ルート要素は - を定義します。 -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 中国語 Web サイトの他の関連記事を参照してください。