1

OK - できる限りシンプルにしようとしている非常に基本的なページがあります。明るいテーマと暗いテーマのどちらかを選択し、それに基づいてボディのクラスを設定する「テーマセレクター」があり、基本的に白/黒の背景/テキストから変更されます。ボックス内に別の背景色があり、これも変更する必要があります... body タグのクラス (またはその先祖) に基づいて、子の適用クラス (おそらく多くは削除されています) を変更する方法はありますか? ）CSSを使用していますか？

簡単なデモ:

<body class="dark">
    <div class="container">
        <div class="differentBG">THIS IS THE BOX I WANT TO CHANGE!</div>
    </div>
</body>

クラスをすべての子に適用するために js (d3 を使用しています) を使用できることはわかっていますが、できるだけ多くの要素を CSS に保持したいと考えています...

4

1 に答える 1

1

マークアップ内の他のタグと同様に、 body タグの祖先クラスに基づいてルールを作成できます。

body.dark .differentBG {
  background: black;
  color: white;
}

私たちのクラスは、「暗い」クラスがある場合にのみdifferentBG黒の背景を適用します。<body>

body.light .differentBG {
  background: white;
  color: black
}

私たちのクラスは、「光」のクラスがあるdifferentBG場合、白い背景を適用します。<body>

ちょっとしたトリビアとして、多くの開発者はまさにこの手法を使用して、「JavaScript 無効」スタイルをセットアップしています。

body.nojs .dynamicElement {
  display: none;
}

次に、JavaScript を使用して、ページの読み込み時にそのクラスを削除します。Modernizrもこのメソッドを使用しますが、<html>要素にクラスを追加して、ユーザー エージェントがサポートする機能を示します。

于 2012-05-10T04:38:22.710 に答える