web-dev-qa-db-ja.com

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

サムネイルギャラリーになる<div>タグに2つのクラスを適用する<div>タグを作成していました。その位置のための1つのクラスとそのスタイルのための他のクラス。この方法でスタイルを適用できましたが、奇妙な結果が出ていたので、疑問に思いました。

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

cssclasscss3html
56
Daniel Ramirez-Escudero

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番目のルールが後から来るため、優先され、背景が赤になります。

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

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

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

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

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

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

105
jfriend00

実際、CSSの最後で定義したクラス-divに適用されます。

見てみな：

cSSの最後の赤

.blue{ color: blue; }
.red { color: red;  }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

対

cSSの最後の青

.red { color: red;  }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
20
Erez Sason

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

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

[〜＃〜] css [〜＃〜]

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

上記の例のように、cssツリーごとの最後のステートメント。greenを使用します。

4
sandeep

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

CSSの優先度について読む 動作を確認します。

3
Henrik Ammer

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

<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番目のセレクターは、より具体的であるため使用されます。

ここを見てください を使用できます。

1
Kyle