CSS 競合スタイルの優先順位

スタイル

優先度高順
!important付きスタイル
スタイル
UAスタイル(ブラウザデフォルトスタイル)

詳細度

セレクタ	例	a	b	c	d	点数
style属性	style=”～”	1	0	0	0	1000
ID	#myId	0	1	0	0	100
要素名.クラス名	li.test	0	0	1	1	11
複数要素	ul li	0	0	0	2	2
単一要素	li	0	0	0	1	1

a
b

<span id="a">a</span>
<span id="b">b</span>

<style>
　#a {
　　color: red;
　}
　span {
　　color: blue;
　}
</style>

→red(ID名)が最優先される

• a
• b

<ul>
　<li class="test">a</li>
　<li>b</li>
</ul>

<style>
　li.test {
　　color: blue;
　}
　ul li {
　　color: green;
　}
　li {
　　color: red;
　}
</style>

→blue(要素名.クラス名)が優先される
→green(複数要素)が次いで優先される

記述順

後に書かれる程優先される(上書きされる)