2つのクラスが1つのdivに割り当てられると、クラスが無効になります

Question 1

サムネイルギャラリーとなるタグに<div>2つのクラスを適用したいタグを作成していました<div>。その位置のための1つのクラスとそのスタイルのためのもう1つのクラス。このように私はスタイルを適用することができました、私は私に質問をもたらしたいくつかの奇妙な結果を持っていました。

<div>タグに2つのクラスを割り当てることはできますか？もしそうなら、どちらがもう一方を無効にしますか、それともどちらが優先されますか？

Question 2

複数のクラスをdivに割り当てることができます。これらをクラス名で次のようにスペースで区切ってください。

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

このdiv要素は、三つの異なるクラスセレクタのための任意のスタイルルールにマッチします：.rule1、.rule2と.rule3。

CSSルールは、スタイルシートで検出された順序でセレクターに一致するページ内のオブジェクトに適用され、2つのルール間に競合がある場合（複数のルールが同じ属性を設定しようとしている場合）、CSSの特異性によってどちらが決定されます。ルールが優先されます。

競合するルールのCSSの特異性が同じである場合は、後のルール（スタイルシートまたは後のスタイルシートで後で定義されたもの）が優先されます。オブジェクト自体のクラス名の順序は重要ではありません。CSSの特異性が同じである場合に重要なのは、スタイルシート内のスタイルルールの順序です。

したがって、このようなスタイルがある場合：

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

次に、両方のルールがdivに一致し、CSSの特異性がまったく同じであるため、2番目のルールが後で来るため、優先され、背景が赤になります。

1つのルールのCSS特異性が高い（div.rule1スコアが高い.rule2）場合：

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

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

2つのルールが競合しない場合：

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

次に、両方のルールが適用されます。

Question 3

実際には、cssで最後に定義されたクラス-がdivに適用されます。

見てみな：

cssの最後の赤

.blue{ color: blue; }
.red { color: red;  }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

スニペットを展開

vs

cssの最後の青

.red { color: red;  }
.blue{ color: blue; }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

スニペットを展開

Question 4

それらが同じプロパティを持っているかどうかを尋ねる場合は、CSSルールに従って最後のステートメントを取ります。

<div class="red green"></div>

CSS

.red{
 color:red;
}
.green{
 color:green;
}

上記の例のように、.greenであるcssツリーの最後のステートメントを取ります。

Question 5

他に何も適用されない場合は、CSSで最後に定義されたクラスが優先されます。

CSSの優先度を読んで、それがどのように機能するかを確認してください。

Question 6

多くのクラスを要素に割り当てることができます。スペースで区切るだけです。

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

CSSのカスケードにより、ドキュメントの最下部に最も近い上書きルールが要素に適用されます。

だからあなたが持っているなら

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

赤い色が使用されますが、上書きされなかったため、背景色は使用されません。

CSSの特異性も考慮する必要があります。より具体的なセレクターがある場合は、次のセレクターが使用されます。

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

ここでの2番目のセレクターは、より具体的であるため使用されます。

ここですべてを見ることができます。