組み合わせ
同じ属性を持つ複数のセレクターを繰り返す必要はありません。セレクターをカンマ (,) で区切るだけで済みます。
たとえば、次のコードがあります。
h2 { 色: 赤 }
.thisOtherClass { 色: 赤 }
.yetAnotherClass { 色: 赤 }
次に、次のように書くことができます。
h2、.thisOtherClass、.yetAnotherClass { 色: 赤 }
合成を使用すると、複数の CSS を一度に定義でき、バイトと時間を大幅に節約できます。
入れ子になった
CSS が適切に構造化されている場合、あまりにも多くのクラスや識別子セレクターを使用する必要はありません。これは、セレクター内でセレクターを指定できるためです。 (もっと言えば、コンテキストセレクター - 翻訳者による)
例えば：
#top {背景色: #ccc; パディング: 1em }
#トップ h1 { カラー: #ff0;
#top p { 色: 赤; 太字;
これにより、次のように HTML に適用すると、不要なクラスまたは識別子セレクターが排除されます。
<div id="トップ">
<h1>チョコレートカレー</h1> <p>これは純粋にチョコレートだけでカレーを作る私のレシピです</p> <p>うーん、うーん、うーん</p>
</div>
これは、英語の半角スペース区切りのセレクターを使用して、ID ID の h1 が色「#ff0」、p が赤色で太字になるように指定しているためです。
これは少し複雑になる可能性もあります (内部、内部、内部、内部など、2 つ以上のレベルがある場合があるため)。もっと練習する必要があります。
ネストを使用すると、CSS コードがよりわかりやすくなり、指定した要素に合わせて CSS をカスタマイズできます。