3

次の HTML があるとします。

<span id="id1" class="class1 class2">This is a test</span>

と 、#id1、.class1および.class2すべてが相互に排他的な CSS ルールの異なるセットを持っている場合、どちらが勝ちますか? 私は例をテストしており、あるケースでは CSS ファイルの一番下にリストされているものを選択しています (私はそう思います) が、別のケースでは非決定的なようです。

この場合、特定のルールはありますか？

4

4 に答える 4

5

CSS でのカスケードの基本原則は、1 つの要素と、同じ要素に適用される 1 つ以上の CSS ルールがあることです (要素がそれらのセレクターに一致するため)。このプロセスでは、適用可能なすべてのスタイルが計算され、競合があれば解決 (またはカスケード) されてから適用されます。

ルールとその宣言が相互に排他的である場合、解決する競合がなく、オーバーライドするものが何もないため、それらのいずれも他のルール自体に「勝つ」ことはありません。たとえば、次のルールがあるとします。

#id1 {
    color: red;
}

.class1 {
    border-width: 1px;
}

.class2 {
    border-style: dashed;
}

次に、要素には赤いテキストと 1 ピクセルの太さの赤い破線の境界線が表示されます。競合がないため、すべてが効果的に組み合わされます。(特殊な動作のため、境界線が赤くなっていることに注意してください。)

jsFiddle プレビュー

同じプロパティの値をオーバーライドする必要があるため、セレクターの特異性とカスケードが関連するのは、複数のルールで宣言された同じプロパティがある場合のみです。その場合、すでに述べたように、ID はクラスよりも優先され、同様に固有のルールが上から下に適用されます。セレクターの特異性について読んでください。

たとえば、次のルールがあるとします。

#id1 {
    color: red;
}

.class1 {
    text-decoration: underline;
    color: green;
}

.class2 {
    text-decoration: none;
    color: blue;
}

次に、要素には装飾のない赤いテキストが表示されます。

  • の値が両方のクラスのcolor値をオーバーライドし、#id1

  • のtext-decoration値は の値を.class2オーバーライドします.class1。

jsFiddle プレビュー

これはすべて同じ要素に適用する必要があることに注意してください。ID のみを持つ親と、クラスのみを持つ子がある場合、まったく別の要素を扱っているため、これは当てはまりません。代わりに機能するのは継承です。これは、上記のリンク先のドキュメントでも説明されています。

于 2013-04-13T02:57:52.600 に答える
0

CSS は上から下まで読み取るため、class2 が優先されます。

詳細情報 http://css-tricks.com/specifics-on-css-specificity/

于 2013-04-13T02:51:32.003 に答える
0

ID はクラスよりも優先されます。

要素に ID を使用して複数回定義された同じスタイルがある場合、使用している場合を除いて、後者が前者よりも優先されます。!important

CSS の優先順位は次のとおりです。

1 . ！重要

2 . HTML 要素内で定義されたインライン スタイル

3 . head セクションで定義された内部スタイル

4 . シートへのリンクである外部スタイルシート ( <link rel="stylesheet" type="text/css" href="style.css" />)

5 . ブラウザのデフォルト

于 2013-04-13T02:55:00.700 に答える
0

これは簡単です-より近く、より洗練されたものが勝ちます（人生と同じように）

いえ

次に、空白のシートを取得します。

クラスから始めます-それらを適用します（別名class1、class2）

しかし、あなたはその個人（id）について知っています

そして、それを適用します..

したがって（「勝者」がいる場合）IDが勝ちます

タグのstyle属性に含まれていない限り - それが勝つでしょう

于 2013-04-13T04:32:32.863 に答える