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

Question

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

これは起こるべきではないことはわかっていますが、レガシーアプリケーションを調整したいので、CSSが真っ最中になっています。

Answer 1

仕様の詳細を確認は、実際にはかなり読みやすいです。要約：

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

2. それ以外の場合、通常はより具体的なものが優先されます。 #id は .classname よりも具体的なセレクタです。 tagname よりも具体的なセレクタです。

3. ルールが同様に具体的である場合、最後に宣言されたルールが優先されます。

これが起こるべきではない特別な理由はありません＆＃8217;。通常、大まかなルールを指定してから、1つのケースをターゲットとするより具体的なルールを追加します。単一の要素に複数の同一プロパティルールが存在することは、異常でも望ましくもありません。

Answer 2

セレクタで#no of id = A、＃no of class = Bおよび#no of tag = cを見つける必要があります

より高い価値を持つABCが勝ちます。

.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＆gt; 022＆gt; 021

so #foo wins

Answer 3

それは起こるはずです！それがCASCADINGスタイルシートと呼ばれる理由です。優先順位の例は、こちら

Answer 4

仕様の特異性順序セクションを参照してくださいその章の残りの！importantルールとルールがスタイルシートに表示される順序にも影響があります。

Answer 5

＆quot;＃id＆quot; ＆quot; .class＆quot;よりも強力です。名前と＆quot; .class＆quot; 「タグ」よりも強力です。名。 ただし、＆quot;！important＆quot;を適用すると、その優先順位はそれらのほとんどです。

• ！important
• インラインスタイル
• id
• クラス
• タグ

Answer 6

セレクター間の優先順位は、セレクターの具体性によって制御されます。特定性の低いセレクターが、特定性の低いセレクターに勝ちます。

2つのセレクターが同様に具体的である場合、後者のセレクターが最初のセレクターに優先します。

特異性には、id、class、およびelementの3つのレベルがあります。 IDがより具体的であるため、 #elem が .elem よりも優先されます。 .elem .cont は、同じレベルでより多くのセレクターを持っているため、 .elem に勝ちます。

「競合が発生するとどうなりますか？」 Selectutorial で。

Answer 7

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

セレクターの詳細について： アンディ・クラークは、それらがどのように機能するかについての最良の概要である特異性戦争を書いた。

Answer 8

CSSは、カスケードスタイルシートの略です。つまり、規則は要素にカスケード方式で適用されます。異なるセレクターが要素に適用されることは完全に正常です。たとえば、次のように考えています：

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

次のルールは＆quot; foo＆quot;に影響します。要素：

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

優先順位のルールは、こちらで見つけることができます。

>

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

Answer 9

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