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(複数要素)が次いで優先される

記述順

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

前の記事

CSS リセットCSS

次の記事

セマンティックWEB