自分の経験上で、「CSSを何度見返しても間違いがないのにスタイルが反映しない」というときは、おおむねスタイルの優先度の間違いや勘違いです。そこで、スタイルの優先度に付いて再確認をしてみました。

CSSのスタイルの指定では、使用するセレクタのタイプごとに優先順位があります。このセレクタのレベルが同じなら、後に記述されたものほど優先度が高くなります。

サンプルは、"box"+ナンバーのテキストの付いたボックスの背景色がそれぞれのテスト結果になります。

同じセレクタでは、記述順が後（下側）ほど優先（１）

// htmlソース
<div class="box1"><span>box1</span></div>

// CSSソース
.box1 {
	background-color: yellow;
	background-color: lightgreen;
	}

同じ「background-color」プロパティの指定が重複していますが、後（下側）が優先されるため、「lightgreen」で上書きされます。

同じセレクタでは、記述順が後（下側）ほど優先（２）

// htmlソース
<div class="box2 box2"><span>box2</span></div>

// CSSソース
.box2 {
	background-color: yellow;
	}
.box2 {
	background-color: pink;
	}

classの「.box2」が二重に定義されていますが、後（下側）が優先されるため、「pink」で上書きされます。

classを併記した場合も後が優先（３）

// htmlソース
<div class="box3-1 box3-2"><span>box3</span></div>

// CSSソース
.box3-1 {
	background-color: pink;
	}
.box3-2 {
	background-color: lightblue;
	}

classに「box3-1」と「box3-2」が併記されていますが、後の「box3-2」が優先されるため、「lightblue」に上書きされます。

idセレクタとclassセレクタは、idが優先（４）

// htmlソース
<div id="box4" class="box4"><span>box4</span></div>

// CSSソース
#box4 {
	background-color: palegoldenrod;
	}
.box4 {
	background-color: lightblue;
	}

idの「box4」とclassの「box4」が同じタグに同時に記述されています。classのほうが後ですが、classセレクタよりもid指定のセレクタが優先されるため、idの「box4」の「palegoldenrod」が適用されます。

タイプセレクタ付きclassとタイプセレクタ無しclassは、タイプセレクタ付きが優先（５）

// htmlソース
<div class="box5-1 box5-2"><span>box5</span></div>

// CSSソース
div.box5-1 {
	background-color: plum;
	}
.box5-2 {
	background-color: palegoldenrod;
	}

タイプセレクタ付きclassとタイプセレクタ無しclassでは、タイプセレクタ付きのほうが優先されるため、
「div.box5-1」の「plum」が適用されます。

タイプセレクタ付きidとタイプセレクタ無しidは、タイプセレクタ付きが優先（６）

// htmlソース
<div id="box6-1 id="box6-2"><span>box6</span></div>

// CSSソース
div#box6-1 {
	background-color: aquamarine;
	}
#box6-2 {
	background-color: plum;
	}

idを二つ付るのはNGなので、誤って付けてしまったと仮定したサンプルです。タイプセレクタ付きidとタイプセレクタ無しidは、タイプ付きのほうが優先されるため、「div.box6-1」の「aquamarine」が適用されます。

タイプセレクタ無しidとタイプセレクタ付きclassでは、タイプセレクタ無しidが優先（7）

// htmlソース
<div id="box7" class="box7"><span>box7</span></div>

// CSSソース
#box7 {
	background-color: beige;
	}
div.box7 {
	background-color: aquamarine;
	}

タイプセレクタの有る無しに関わらずidのほうが、タイプセレクタ付きclassよりも優先されるため、「#box7」の「beige」が適用されます。

タイプセレクタとclassセレクタでは、classが優先（８）

// htmlソース
<dl><dt></dt><dd class="box8">box8</dd></dl>

// CSSソース
.box8 {
	background-color: yellow;
	}
dd {
	width:200px;
	padding:5px;
	border:1px solid #777;
	text-align:center;
	background-color: beige;
	}

タイプセレクタ（この場合「dd」）とclassでは、classが優先されるため、「box8」の「yellow」が適用されます。

box8

 

その他の比較

全称セレクタ「*」とタイプセレクタ「body」では、「body」が優先されます。また、同じタイプセレクタでも「div」のほうが「body」よりも優先されます。スタイルを適用する範囲が狭い（特定される）ほど優先度が高いことになります。

優先度の順位（右側ほど優先度が上位）

（擬似要素、疑似クラスなどは比較していません）

 

[CSS]　記述したスタイルの優先順位の確認（２）　　[CSS]　記述したスタイルの優先順位の確認（３）