ネストされた CSS スコープのカスタム プロパティが無視されるのはなぜですか?

ネストされた宣言内で無視される CSS スコープ付きカスタム プロパティ

CSS 内でカスタム プロパティを定義する場合、スコープがその評価にどのような影響を与えるかを理解することが重要です。スコープ付きカスタム プロパティは、定義されている要素またはコンポーネント内でローカルにのみ使用できます。ただし、外側のスコープでスコープ指定されたカスタム プロパティを使用しようとすると、共通の課題が発生します。

この特定のケースの目標は、カスタム プロパティを介してスケール係数を定義し、それをさまざまな要素に適用することです。ただし、示されているように、適用されるスケール クラスに関係なく、すべてのリスト要素は均等にスケールされます。

この問題に対処するには、カスタム プロパティが上下に評価されることに注意することが重要です。この例のように、カスタム プロパティがルート レベルで定義されている場合、ネストされた要素内の同じプロパティの後続の定義は無視されます。

次の簡略化した図を考えてみましょう:

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

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

ここでは、カスタム プロパティ --color がルート レベルで定義されています。これをspan要素内でオーバーライドしようとすると:

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

ネストされたCSS宣言を持つspan要素は赤色になりません。これは、カスタム プロパティがルート レベルですでに評価されており、--color が青に設定されており、オーバーライドの試行が無視されるためです。

対照的に、継承された --c: を持つspan要素は赤に変わります。親要素からカスタム プロパティ値を継承しているため、赤色です。

目的の効果を実現するには、カスタム プロパティがネストされた各コンポーネント内で個別に評価されることを確認する必要があります。これは、ルート レベルではなく、各クラスまたはコンポーネント内でローカルにプロパティを定義することで実行できます。

以上がネストされた CSS スコープのカスタム プロパティが無視されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。