「クラシック」CSS ルールを同じスタイルを含むメディア クエリとマージすることはできますか?
P粉129168206
P粉129168206 2024-02-03 19:13:56
0
2
449

同じ要素に適用され、同じスタイルを含む 2 つのルールを組み合わせることができるかどうか疑問に思っていますが、ルールの 1 つがメディア クエリ内にあり、次のような結果が得られます。

リーリー

ルールは次のとおりです:

  • prefers-color-scheme に従って、.content
  • に色を適用します。
  • inputchecked の場合、.content color を変更します
リーリー リーリー

prefer-color-scheme

が暗い場合、または #dark-theme がチェックされている場合、ここの .content は黒の背景と白の色になります。 。 どちらのルールも同じスタイルを適用します。

これらのルールを組み合わせる方法はありますか?

P粉129168206
P粉129168206

全員に返信(2)
P粉163951336

:root {
  --dark-color: white;
  --dark-bg: black;
  --light-color: black;
  --light-bg: white;
}

@media (prefers-color-scheme: dark) {
  #default-theme:checked~.content {
    color: var(--dark-color);
    background-color: var(--dark-bg);
  }
}
#dark-theme:checked~.content {
  color: var(--dark-color);
  background-color: var(--dark-bg);
}

@media (prefers-color-scheme: light) {
  #default-theme:checked~.content {
    color: var(--light-color);
    background-color: var(--light-bg);
  }
}
#light-theme:checked~.content {
  color: var(--light-color);
  background-color: var(--light-bg);
}







Test
いいねを押す +0
P粉543344381

ネイティブ CSS を使用してこれを行うことはできません。ただし、問題が記述量の減少に関連している場合は、CSS コンパイラーがすでにそのニーズに対応しています。 試してみたい場合は、Sass で書かれた簡単なコードを次に示します。

まず、コンテンツを @mixin でラップします。選択したテーマに基づいて変更する変数を使用してクラスを保存します。

リーリー

その後、それを別のミックスインで使用してテーマ スタイルを定義できます:

リーリー

最後に、変数を変更するだけで、これを使用して必要なだけテーマを作成できます:

リーリー

元のコードと同じ出力を見たい場合は、ここで試してください

完全なコードをコピーして貼り付けて、変換を確認します:

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!