1

私のCSSには次のものがあります：

.myDiv{
    float:left;
    width:100px;
    height:100px;
}

.yellow{
    background:#faf8c7;
}

.lightGrey{
    background:#f8f8f8;
}

私のHTMLで

<div class="myDiv lightGrey yellow"></div>

divこれはを黄色で表示するはずですが、代わりに lightGrey になっています。CSS (HTML ではない) で .yellow と .lightGrey の順序を変更すると、div黄色になります...これはなぜですか?

divが黄色か灰色かを決定するのは、クラスが HTML に記述されている順序であるべきです。CSS の順序は関係ありません。

4

4 に答える 4

8

確かに、divが黄色か灰色かを決定するのは、クラスがhtmlに記述されている順序でなければなりません

カスケードの定義方法は次のとおりです。

  1. ターゲットメディア タイプについて、問題の要素とプロパティに適用されるすべての宣言を見つけます。関連付けられたセレクターが問題の要素と一致し、ターゲット メディアが、宣言を含むすべての @media ルールおよびスタイル シートに到達したパス上のすべてのリンクのメディア リストと一致する場合、宣言が適用されます。
  2. 重要度 (通常または重要) と出所 (作成者、ユーザー、またはユーザー エージェント) に従って並べ替えます。優先順位の昇順:
    1. ユーザーエージェント宣言
    2. ユーザー法線宣言
    3. 通常の宣言の作成
    4. 重要な宣言を作成する
    5. ユーザーの重要な宣言
  3. セレクターの特異性によって、同じ重要性と起源を持つルールを並べ替えます。より具体的なセレクターは、より一般的なセレクターをオーバーライドします。疑似要素と疑似クラスは、それぞれ通常の要素とクラスとしてカウントされます。
  4. 最後に、指定された順序で並べ替えます。2 つの宣言の重み、起源、特異性が同じ場合、後者の指定が優先されます。インポートされたスタイル シートの宣言は、スタイル シート自体の宣言の前にあると見なされます。

＃4はあなたが苦労している部分です。宣言は同じ特異性を持っているため、後者が勝っています。

于 2013-08-28T15:08:45.273 に答える
1

カスケードスタイル シート。

つまり、スタイルシートの後半に表示されるスタイルは、シートの前に表示されたスタイルを上書きします。

于 2013-08-28T15:09:29.003 に答える
0

すべてのルールは同じ特異性を持っているため、( Cascadeの意味で) 最後に指定されたルールが優先されますCSS。つまり、マークアップでクラスを再配置しても、指定されたスタイルでは背景は常にライトグレーになります。

確かに、div が黄色か灰色かを決定するのは、クラスが HTML に記述されている順序である必要があります。CSS の順序は関係ありません。

上記の説明では逆です

于 2013-08-28T15:08:37.987 に答える
0

各クラスの HTML コードの順序myDiv lightGrey yellowはまったく重要ではありません。あなたが言うように: 3 色を購入しましたが、最初に購入した色と最後に購入した色がわかりません。

于 2013-08-28T15:12:49.440 に答える