CSS カスタム プロパティを使用して親要素から値を継承できますか?

継承された値を CSS カスタム プロパティに保存できますか?

CSS では、カスタム プロパティ (CSS 変数とも呼ばれます) は、値を全体にわたって保存および再利用する便利な方法を提供します。文書。ただし、これらの変数は親要素から値を継承できますか?

サンプル コードを考えてみましょう:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  background: var(--color);
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

この例では、.box 要素の背景色を継承したいと考えています。 CSS 変数を使用した :before 疑似要素。ただし、 --color 変数は :root レベルで定義され、 :before 擬似要素は .box 内にネストされています。

カスタム プロパティが優先されるため、background: :before で継承する設定は機能しません。

解決策: 初期値フォールバック

継承された値を CSS 変数に保存するには、CSS 初期値をフォールバックとして利用できます。初期値は、プロパティのデフォルトまたは未設定の状態を表します。

この場合、次のようにコードを変更できます。

.box:before {
  ...
  background: var(--color, initial);
  ...
}

var( のフォールバック値として初期値を指定することで、 --color)、--color が明示的に設定されていない場合は、継承された値の使用を強制します。これにより、親要素から背景色を継承できるようになります。

これを示すために、.box の背景色をグレーに設定してみましょう。この場合、 --color を明示的に定義していませんが、:before 疑似要素は、初期値のフォールバックにより .box の背景色を継承します。

.box {
  background: gray;
  --color: initial;
}

以上がCSS カスタム プロパティを使用して親要素から値を継承できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。