0

問題はこのリンクで表示できます。http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html

3 つのボックスの背景は緑にする必要がありますが、別のスタイルが優先されます。スタイルは、スタイル シートのどこに表示されるかに基づいて優先されるはずであり、スタイル シートの下位のスタイルは、スタイル シートの上位のスタイルよりもカスケード (優先) されると考えていました。これらのボックスの背景色のスタイル シートがここにあるため、それは間違っていると思います。

    #maincontent .col {
    background: #ccc;
    background: rgba(204, 204, 204, 0.85);

}

#callout1   {
    background-color: #00B300;
    text-align:center;
}
#callout2   {
    background-color: #00CC00;
    text-align:center;
}
#callout3   {
    background-color: #00E600;
    text-align:center;
}

「#maincontent .col」のスタイルを外すと緑が出る(リンク) http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.htmlですが、後なので緑が出るはずだと思っていました上で指定された灰色。

必要なものを入手する方法を見つけていますが、背景が緑ではなく灰色である理由を理解すれば、はるかに簡単になります。

どんな支援も非常に高く評価されます。ありがとうございました。

4

5 に答える 5

3

CSS の「カスケード」は、スタイルの特異性を指します。

すべて同じで、CSS の後半に現れるスタイルは前のスタイルよりも優先されます。

ただし、具体性を高める方法は他にもあります。つまり、要素を参照する際の「具体的」さです。

たとえば、次のようになります。

table.myClass {style}

以下よりも具体的です。

table {style}

したがって、そのように注文しても、その特定のクラスを使用するテーブルでは、最初のスタイルが 2 番目のスタイルよりも優先されます。

あなたの場合、#yourID .colより具体的です#anotherID

特異度の計算方法は少し難しい場合があります。これは、1 つの説明と別の説明です。

あなたの場合、具体的には、「ID +子クラス」が「ID」よりも優先されます。

于 2013-07-01T03:37:15.977 に答える
1

要素に適用するスタイルを選択するときは、次のものが (順番に) 優先されます。

  1. !important (定義に !important を追加)
  2. Origin (インライン スタイル タグ、またはスタイルシート内)
  3. 特異性 (セレクターが階層内でどの程度特異的か)
  4. 順序 (スタイルシートで上位 -> 下位)

あなたの場合、セレクターは階層内でより具体的であるため、特異性が勝者です。

持っていない場合は、IDセレクター#maincontent .colだけ.colがより具体的であり、適用されます。

ただし、!important は優先順位の一番上にあるため、常に !important を追加してスタイル定義をオーバーライドすることができます。

于 2013-07-01T03:36:12.373 に答える
1

問題は、#maincontent .colより具体的であるということです#callout

のようなものに変更すると#maincontent .section #callout、特異性が高くなるため、スタイルが機能します。

は使用しないでください!important。後で多くの問題が発生する可能性があるためです。

于 2013-07-01T03:30:26.577 に答える
0

スタイルシートで最初にどのスタイルを使用するかだけではありません。優先順位は次のように機能します。

  1. より多くの ID を持つルールが優先されます。(#サイン)
  2. 同じ数の id を使用すると、より多くのクラスを持つものが勝ちます (例: ドットが付いているもの)。
  3. ID とクラスの数が同じ場合、より多くの要素を持つルールが優先されます。
  4. 以前のルールに関係なく、インライン スタイルが優先されます。これらは、マークアップに「stlye」属性で埋め込まれたスタイルです。
  5. 以前のすべてのルールに関係なく、!important のあるルールが優先されます。例: .thing{width:30px !important;}. !important フラグが設定されているルールの中で、以前のルールが再度適用されます。
  6. クラス、ID、要素の数が同じで、重要なルールがないルールの場合、スタイルシートまたはページ内の順序が重要です (最新のルールが優先されます)。

したがって、あなたが重要だと思うことは、実際には css ルールの優先順位に関してそれほど重要ではない要素です。

あなたの例では、1 つの ID と 1 つのクラスがあり、他のルールの 1 つの ID よりも「特異性」が高いため、最初のルールが優先されます。勝ちたくない場合は、他のルールにクラスを追加するか、最初のルールからクラスを削除する必要があります。これには、マークアップを少し変更する必要がある場合があります...

仕様を読むことは非常に啓発的です。

http://www.w3.org/TR/CSS2/cascade.html (セクション 6.4.3「セレクターの特異性の計算」)

于 2013-07-01T04:27:30.987 に答える
0

#maincontent .col要素に固有の css があります。したがって、この作業のために-

  1. スタイリング後にお使いいただけ!importantます。 例

  2. css をこのように作成できます。#maincontent #callout1これは、より具体的です#maincontent .col。 例

  3. 要素にインラインCSSを適用できます。 例

  4. #maincontent .colに置き換えることができます.col。 例

于 2013-07-01T04:17:08.653 に答える