CSSの優先順位

「スタイルを指定したのに適用されない！」ということがあります。
そんなときは、CSSの優先順位を見直してください。

スタイルの指定方法による優先順位

スタイルの指定方法には優先順位があります。
同じ指定方法の場合には後から記載されたほうが優先されます。

指定方法	使用例	ポイント
style属性	style="color: #c00;"	1,000
id	#text_color_blue{color: #00c;}	100
class	.text_color_green{color: #0c0;}	10
擬似クラス	a:visited {color: #800080;}	10
要素	p {color: #333;}	1
擬似要素	p:after {content: "[END]"; color: pink;}	1
全称セレクタ	* {color:#000;}	0

仮に上記のstyleとidとclassを同時に指定したときにどうなるか試してみましょう。

<p style="color:#cc0000;" id="text_color_blue" class="text_color_green">
	この場合は赤色で表示されます。
</p>

この場合は赤色で表示されます。

style属性＞ id ＞ class なので、style属性で指定した赤色が適用されています。

<p id="text_color_blue" class="text_color_green">
	この場合は青色で表示されます。
</p>

この場合は青色で表示されます。

今度はstyle属性はなく、id ＞ class なので、idで指定した青色が適用されています。

<div id="text_color_blue">
	<p class="text_color_green">
		この場合は緑色で表示されます。
	</p>
</div>

この場合は緑色で表示されます。

divのidで青色が指定されていますが、pのclassで緑色が指定されているので緑色が適用されています。
pのclassがなければ、divのidで指定されている青色が適用されます。

#sample_blue p{color: #00c;}
.sample_green{color: #0c0;}

<div id="sample_blue">
	<p class="sample_green">
		この場合は緑色ではなく、青色で表示されます。
	</p>
</div>

この場合は緑色ではなく、青色で表示されます。

一つ前と同じようにpのclassで緑色が指定されていますが、「#sample_blue p」という指定があるので、
id ＞ classで、青色が適用されています。

h4 {color: #0c0 !important;}
h4#sample_blue2{color: #00c;}

<h4 id="sample_blue2">
	この場合は青色ではなく、緑色で表示されます。
</h4>

同じh4であれば後から記載したほうが優先されますし、「sample_blue2」というidで青色を指定していますが、「!important」があるため緑色が適用されています。