[解決済み] つのクラスに2つのクラスが割り当てられている場合、そのクラスが優先されます。

質問

私は <div> タグを作成したのですが、その中で <div> タグに二つのクラスを適用したい。1つのクラスは位置のために、もう1つのクラスはスタイルのために。この方法で私はスタイルを適用することができ、私はいくつかの奇妙な結果を持っていた、それは私に質問をもたらしました。

2 つのクラスを <div> タグに割り当てることができますか？その場合、どちらが優先されるのでしょうか？

どのように解決するのですか？

1つのdivに複数のクラスを割り当てることができます。 このように、クラス名をスペースで区切るだけです。

<div class="rule1 rule2 rule3">Content</div>

この div は、3 つの異なるクラス セレクタのスタイル ルールに一致するようになります。 .rule1 , .rule2 と .rule3 .

CSS ルールは、スタイルシートの中で遭遇した順番に、そのセレクタにマッチするページ内のオブジェクトに適用され、もし 2 つのルールの間に衝突があった場合（同じ属性を設定しようとする複数のルール）、次のようになります。 CSS の特異性 はどのルールが優先されるかを決定します。

CSS特異性が競合する規則について同じである場合，後のもの(スタイルシート又は後のスタイルシートにおいて後に定義されるもの)が優先される。 オブジェクト自体のクラス名の順序は重要ではありません。 CSSの特異性が同じであれば、重要なのはスタイルシートのスタイルルールの順序です。

つまり、このようなスタイルがあった場合

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

そして、両方のルールが div にマッチし、まったく同じ CSS 特性を持つため、2 番目のルールが後に来るので、そちらが優先され、背景は赤になります。

一方のルールがより高い CSS 特性を持つ場合 ( div.rule1 よりも高いスコア .rule2 ):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

とすると、それが優先され、ここの背景色は緑になります。

2つのルールが衝突しないのであれば

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

すると、両方のルールが適用されます。