CSSを適用する優先順序のサンプル

CSSを適用する優先順序のサンプルです。

CSSの適用の優先順序
記述する場所でセレクタが選ばれるサンプル
!importantのサンプル
詳細度の大きいセレクタが選ばれるサンプル

CSSの適用の優先順序

セレクタの詳細度の大きい(より特定される)ものが優先されます。以下はセレクタの詳細度を小→大に並べたものです。
・全称セレクタ（ユニバーサルセレクタ,アスタリスク*）
・タイプセレクタ (要素型セレクタ)
・クラスセレクタ
・属性セレクタ
・擬似クラス
・ID セレクタ
・インラインスタイル
詳細度が等しい場合は、 CSSで発見される最も後ろのものが適用されます。
CSSを記述する場所は以下の３つあります。1→2→3と後の宣言になります。
１．link要素で外部のCSSファイルを指定
２．style要素を作成しその中にCSSを記述
３．htmlの要素の中にstyle属性を追加しそこにCSSを記述(=インラインスタイル)
!importantをつけると上記の優先度を無視して!importantがある箇所の優先度が一番強くなります。
以下は、MDNの詳細度の概念のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

記述する場所でセレクタが選ばれるサンプル

記述する場所でセレクタが選ばれるサンプルです。

2行目は、IDセレクタで7行目の背景色を指定しています。
7行目は、インラインスタイル(P要素のstyle属性)で背景色を指定しています。
インラインスタイルの方が詳細度が大きい(より特定される)ので7行目で指定した色が表示されます。

<style>
#t1{ 
  background-color:SkyBlue;
}
</style>

<p id="t1" style="background-color:Orange;">テスト1</p>

上記コードの実行結果です。

テスト1

!importantのサンプル

!importantのサンプルです。

2行目は、クラスセレクタで7行目の背景色を指定しています。!importantがあります。
7行目は、インラインスタイル(P要素のstyle属性)で背景色を指定しています。
本来であれば7行目のインラインスタイルが優先されますが、2行目に!importantの指定があるので2行目の色が適用されます。

<style>
.t2{ 
  background-color:SkyBlue !important;
}
</style>

<p class="t2" style="background-color:Orange;">テスト2</p>

上記コードの実行結果です。

テスト2

詳細度の大きいセレクタが選ばれるサンプル

詳細度の大きいセレクタが選ばれるサンプルです。

2行目は、IDセレクタ(#t1)で16行目を指定しています。
6行目は、クラスセレクタ(.t2)で16行目を指定しています。
10行目は、タイプセレクタ (要素型セレクタ)(P)で16行目を指定しています。
結果は、この中で詳細度が一番大きい(より特定される)IDセレクタの色が適用されます。

<style>
#t1{ 
  color:blue;
  background-color:orange;
}
.t2{ 
  color:green;
  background-color:SkyBlue;
}
p{ 
  color:red;
  background-color:yellow;
}
</style>

<p id="t1" class="t2">テスト1</p>

上記コードの実行結果です。