css - 複数のクラスをオーバーライドする

Question

複数のクラス内の特定のタグをオーバーライドしようとしている場合、クラスごとに明示的に書き出す必要がありますか、またはそれらを組み合わせる方法はありますか。たとえば、私は持っています：

.class1 { }
.class2 { }
.class1 h2 {
    <!-- some code -->
}

また、class1 の h2 タグのコードを class2 の h2 タグにも適用したいのですが、コードを 2 回書かずに class1 と class2 の両方に定義する方法はありますか?

Answer 1

Selector Groupingが必要です：

.class1 h2,
.class2 h2 { ... }

仕様の引用：

この例では、同一の宣言を持つ 3 つのルールを 1 つに要約します。したがって、

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

次と同等です。

h1, h2, h3 { font-family: sans-serif }

Answer 2

複数のクラスで同じcssスタイルを使用している場合は、コードを最適化するために、それらのクラスを組み合わせる必要があります。

cssクラスをグループ化できます。

.class1 h1{ ........}
.class2 h2{ ........ }

これは、h2要素がclass1cssスタイルを持つことを意味します。

.class1,.class2{..........}

これは、class1、class2の両方が同じcssスタイルを持っていることを意味します

Answer 3

 <h2 class="class1 class2">This is my taunt</h2>

これは、複数のクラスを実装する標準的な方法です。原則として、オーバーラップすることが事前にわかっているクラスを定義して、他のクラスにあることがわかっている宣言を除外する必要があります。共通のプロパティ/値のペアの 3 番目のクラスを作成します。

Answer 4

ページ内のすべての h2 に css を適用する場合は、ページ レベルで定義できます。ただし、 class1 と class2 のみを申請する場合は、2 回書く必要があります。