CSSセレクタの優先順位は何ですか

Question

CSS質問：要素に2つの異なるセレクタが適用される場合、誰が勝ちますか？

これは起こらないはずですが、私は従来のアプリケーションを調整したいと思っています。そして、CSSは真っ暗になっています。

Answer 1

この仕様のgory detailsは、実際にはかなり読み取り可能です。要約：

1. !importantルールとインラインstyleルールは最も勝ちます。

2. それ以外の場合は、通常より具体的な勝ちです。 #idは.classnameよりも具体的なセレクターで、tagnameよりも具体的なセレクターです。

3. ルールが等しく特定の場合、最後に宣言されたものが勝ちます。

「これは起こらない」特別な理由はありません。広範なブラシルールを指定してから、より具体的なルールを追加して1つのケースを対象とするのは正常です。 1つの要素上の複数の同じプロパティールールは珍しいことでも、望ましくないものでもありません。

Answer 2

このセクションの残りの部分（重要なルールとスタイルシートに表示されるルールの順序も同様です）は、この仕様のspecificity orderセクションを参照してください。

Answer 3

これは起こるはずです！それがCASCADINGスタイルシートと呼ばれる理由です。優先順位の例を見つけることができますhere

Answer 4

セレクタ間の優先順位は、それらの具体的な方法によって制御されます。より具体的なセレクタはあまり具体的ではありません。

2つのセレクタが等しく特定されている場合、後者のセレクタは最初のセレクタよりも優先されます。

特異性には、id、class、elementの3つのレベルがあります。だから#elemが勝利.elemとしてIDはより具体的です。 .elem .contは同じレベルでより多くのセレクタを持っているので、.elemを勝ち取ります。

続きを読む「競合が発生した場合はどうなるのですか？ Selectutorial。

Answer 5

セレクタが同じ特異性を共有する場合にのみ、CSSファイルの順序が重要です。セレクタ特異性の詳細について

： Andy Clarke penned Specificity Wars which is the best overview of how they work.

Answer 6

CSSはカスケーディングスタイルシートの略です。これは、ルールがカスケード的な方法で要素に適用されることを意味します。異なるセレクタが要素に適用されることは、まったく正常です。以下に、例えば、考えて：

<div class="wrapper"> 
    <div id="foo" class="bar" style="some rules">Test</div> 
</div> 

次のルールは、 "foo" という要素に影響を与える：優先順位のための

.wrapper { 
    //some other rules 
} 

#foo { 
    // some more rules 
} 

.bar { 
    // some more rules 
} 

ルールがhereを見つけることができます。

私はいつもFirefox "firebug"プラグインを使用することをお勧めします。特定の要素に対して評価されるプロパティとその理由を正確に示し、カスケード時のオーバーライドを強調します。

Answer 7

あなたがより高い値が勝つとセレクタ

ABCにID = Aの#NO、＃クラス= BのNOおよびタグ= Cの#NOを見つけなければなりません。

.wrapper .title p { 
    //some other rules 
} 

A=0 B=2 C=1 =021 

\#foo { 
    // some more rules 
} 

A=1 = 100 

.bar .head div li{ 
    // some more rules 
} 


A=0 B=2 C=2 =022 

100> 022> 021

ので#foo勝ち

Answer 8

1. ！重要
2. インラインスタイルは
3. クラス
4. タグ

を#ID

Answer 9

"＃id"は ".class"の名前より強力で、 ".class"は "タグ"の名前より強力です。 しかし、 "！important"を優先度よりも適用すると、それらのほとんどがそれらになります。

• ！重要
• インラインスタイル
• ID
• クラス
• タグ