CSS優先度詳細

10283 ワード

コンセプト

ブラウザは、優先度を判断することによって、どの属性値が要素に最も関連しているかを決定し、その要素に適用します.優先度は、セレクタからなるマッチングルールによって決定されます.

計算方法

優先度は、各セレクタタイプからなるカスケード文字列から算出する.対応する一致式の重み値ではありません.
優先度が同じ場合、要素は最終的にCSSの下位宣言を適用する.
注意:ドキュメントツリー内の距離は、要素の優先度計算に影響しません.(ドキュメントでDOMツリーの距離を無視した例が見られます)

優先順位

以下は、優先度が段階的に増加したセレクタのリストです.

汎用セレクタ*

要素(タイプ)セレクタ

クラスセレクタ

属性セレクタ

擬似

IDセレクタ

インラインスタイル

実際には、カラーなどのプロパティなどのスタイルを親要素から継承することもできます.これらの継承されたスタイルの優先度は、汎用セレクタを含む要素自体のスタイルよりも常に低くなります.


    text

* {
    color:red;
}

#test{
    color:blue; 
}

最終textの色は赤いです.

!importantルールは例外です

!importantの規則が1つのスタイル宣言に適用する場合、このスタイル宣言は、宣言リスト内のどの位置にあるかにかかわらず、CSS内の他の宣言を上書きする.それでも、!importantルールは優先度に関係なく!importantを使用するのは良い習慣ではありません.これは、スタイルシートの本来のカスケードルールを変更し、デバッグしにくいためです.

いくつかの不文律

全局範囲のcssに!importantは使用する.

は、指定されたページで !importantが使用されるのは、全局範囲をカバーするcssまたは外部css(例えば、参照されるExtJsまたはYUI)が必要な場合のみです.

プラグインで!importantを使用しないでください.

は、 !importantではなく、スタイルルールの優先度を使用して問題を解決することを常に優先的に考慮しなければならない.

代わりに、
CSSのカスケード・プロパティの活用
適切なセレクタをより多く使用します.たとえば、選択したオブジェクト要素を追加する前に、より多くの要素を追加して、選択範囲を縮小すると、セレクタがより的確になり、優先度が高くなります.


  Text


div#test span { color: green }
span { color: red }
div span { color: blue }

あなたのcss文の順序がどうであれ、テキストは緑色(green)になります.このルールが最も特殊で、優先度が最も高いからです.(同じように、文の順序にかかわらず、青(blue)のルールは赤(red)のルールを上書きします)

いつ使うべきですか。

A)一つのケース
あなたのウェブサイトには、全局スタイルを設定したCSSファイルがあります.同時に、あなた(または同僚)はいくつかの効果を書きました.
普通は
非常に悪い行内スタイル(行内スタイルの優先度が最も高い).
この場合、要素に直接書かれた行内スタイルを上書きするために、グローバルCSSファイルに!importantのスタイルを書くことができます.
生きた例としては、jQueryプラグインに悪い行内スタイルを書いた人がいます.
B)別の場合

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

外層に#someElement ，があるのに、どうやってawesomeの段落を赤くすることができますか?この場合、!important，。を使用しない場合

どうやってカバーしますか!important
簡単です.!importantのCSS文を追加して、より優先度の高いセレクタ(既存のラベル、class、idセレクタを追加)に適用するだけです.またはセレクタと同じように維持しますが、追加する場所は元の宣言の後にする必要があります(優先度が同じ場合、後に定義されたものは前に定義されたものを上書きします).


  text

既存の緑のテキストを赤にし、優先度を上げる方法:

#test.a{
  color: red !important;
}
a{
  color: green !important;
}

ただし

a{
  color: green !important;
}
a{
  color: red !important;
}

importantに関する投稿の詳細:
http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
http://stackoverflow.com/questions/11178673/how-to-override-important
http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

:not擬似クラス例外

:not 否定擬似クラスは優先度計算において擬似クラスと見なされない.それでも、セレクタ数を算出する際には擬似クラスを通常のセレクタとしてカウントする.
これはCSSコードです.

div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}

次のHTMLに適用されると、

<div class="outer">
<p>This is in the outer div.p>
<div class="inner">
<p>This text is in the inner div.p>
div>
div>

次の結果が画面に表示されます.
This is in the outer div. (orange)
This text is in the inner div. (lime)

タイプベースの優先度

優先度はセレクタの種類によって算出する.以下の例では、属性セレクタは、IDを1つ選択するにも関わらず、優先度算出法則においてはその種類に応じて算出する.
次のスタイル宣言があります.

* #foo {
color: green;
}
*[id="foo"] {
color: purple;
}

次のHTMLに適用します.

<p id="foo">I am a sample text.p>

最終的には、次のような効果が得られます.
I am a sample text. (green)
同じ要素が選択するも、IDセレクタの優先度が高いため、第1のスタイル宣言が有効となる.

DOMツリーの距離を無視

次のスタイル宣言があります.

body h1 {
color: green;
}
html h1 {
color: purple;
}

次のHTMLに適用すると、

<html>
<body>
<h1>Here is a title!h1>
body>
html>

ブラウザは次のようにレンダリングします.
Here is a title! (purple)