CSSには、行間>内部>外部、ID>class>要素だけでなく、独自の優先順位計算方法があります.

1.スタイルタイプ

行間スタイル

 の  CSSスタイル。

インラインスタイル

外部様式

2.セレクタタイプ

セレクタ
くり
ID
#id
class
.class
タブ
p
ツールバーの
[type='text']
擬似クラス
:hover
ぎじげんそ
::first-line
隣接セレクタ、子セレクタ> +

3.ウェイト計算規則

インラインスタイル(style=「...」など)重みは1000です.

IDセレクタ、#contentなど、重み値は0100です.

類、擬似類、属性選択器、例えば.content、重み値は0010です.

タイプセレクタ、div pなどの擬似要素セレクタ、重み値は0001である.

ワイルドカード、サブセレクタ、隣接セレクタなど.* > +のように、重みは0000である.

が継承するスタイルには重み値がありません

4.比較ルール

1,0,0,0 > 0,99,99,99.つまり、左から右へ1ランクずつ比較すると、前のレベルが等しくなってから後になります.

は、行間、内部、外部のスタイルにかかわらず、このルールに従って比較されます.直感的な行間>内部>外部スタイルではなく、ID>class>要素.このような錯覚があるのは,確かに行間が1等の重みであるため,その重みが最も高いからである.内部スタイルは、一般的に外部スタイルが参照された後に書かれているため、前のスタイルを上書きします.

重みが同じ場合、後のスタイルは前のスタイルを上書きします.

ワイルドカード、サブセレクタ、隣接セレクタなど.ウェイト値は0000ですが、継承されたスタイルよりも優先され、0ウェイト値は無ウェイト値よりも優先されます.

5. !important

!importantの役割は優先度を高めることであり、言い換えれば.この文を加えたスタイルの優先度は最も高い(インラインスタイルよりも高い).

ie 7+と他のブラウザはimportantのこのような役割に対する支持度が良い.ie 6-のみバグがあります

p{
  color:red !important;
  color:blue;    
}        //   blue

しかし、ie 6がimportantをサポートしていないわけではありませんが、サポートにバグがあるだけです.

p{color:red !important;  }
p{color:blue;}        //         red。  ie6    important 

!importantルールがスタイル宣言に適用されると、スタイル宣言は、宣言リスト内のどの位置にあるかにかかわらず、CSS内の他の宣言を上書きします.それでも、!importantルールは優先度とは無関係です.!importantを使用するのは良い習慣ではありません.それはあなたのスタイルシートの本来のカスケードルールを変えたので、デバッグが難しいからです.!importantを使用する場合は、次の点に注意してください.

Neverはいつまでも全局範囲のcssで使用しないでください!important

Onlyは、全局または外部css(例えば、参照されているExtJsまたはYUI)を上書きする必要がある特定のページでのみ使用されます.important

Neverはあなたのプラグインで使用しないでください!important

Alwaysスタイルルールを使用する優先度を最適化して問題を解決します.important

ネット上の投稿の多くは深さと浅さが異なり、前後の矛盾さえあり、下の文章は学習過程の総括であり、間違いを発見したら、コメントを歓迎します.
もしあなたも知識を分かち合うのが好きなら、私たちに参加してください.QQ群号:431679880~
参照先:

CSSセレクタ重み計算規則

MDN優先度はどのように計算されますか?