94

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

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

4

5 に答える 5

169

複数のクラスを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;
}

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

于 2012-09-04T07:27:23.273 に答える
35

実際には、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>

于 2015-04-17T09:29:28.037 に答える
4

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

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

CSS

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

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

于 2012-09-04T07:27:28.790 に答える
3

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

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

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

于 2012-09-04T07:27:19.553 に答える
3

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

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

于 2012-09-04T07:26:45.133 に答える