私は自分のサイトにダークモードを実装し、可能な限りクリーンな方法（ボイラープレートコードなし）でそれをやろうとしています。1つのCSSクラスに複数のスタイルを定義する方法は？
CSSで.darkmodeクラスを作成し、スタイルを定義したい場合、ユーザーがダークモードを有効にすると、javascriptは単に<body>にdarkmodeクラスを追加します。
CSSでこれをどうすればできますか？ <body>にこのクラスを追加するとき
.darkmode {
.content{
background-color: black;
}
input{
background-color: black;
}
}
だから私の質問は、どのように私は、ページ上のCSSの変更異なる要素を作ることができていますか？
投稿したコードは有効なSCSS/LESSです。しかし、平野CSSには、単に
.darkmode .content { /* CSS */ }
.darkmode input { /* CSS */ }
を使用することによってそうです、あなたは常にすべてのセレクタの前に.darkmodeを指定する必要があることを行うことができます。
恐ろしいです！ソリューションをありがとう。 – captincrunch
は、はるかに具体的であるため、ルールはデフォルトのルールを上書きします
.mydiv .myanchor
のようにあなたがオーバーライドすることができます/
body.darkmode .mydiv .myanchor
を使用して属性を追加し、あなたが選択を持っているとしましょう。
これを実現するには、通常のCSSではCSSの子セレクタを使用する必要があります。
body.darkmode .content {
/* Put styles here */
}
body.darkmode input {
/* Put styles here */
}
は、基本的にはそこロジックは言う：「クラスdarkmodeでbody要素を取得し、それが子供の見つけ.content/input」スペースでseporated 2つの要素セレクタを持つ CSSセレクタで
は、すべて検索します第1の要素の内側の第2の要素のうちの第2の要素の、 div pはすべて<div>タグの中に<p>タグのすべてを見つけるでしょう。
CSSでこの構文的な砂糖を使用することはできませんが、SassまたはLessで行うことができます。バニラCSSでそれを行う唯一の方法は '.darkmode .content {...}' '.darkmode input {...}' – Damon