CSSの優先順位と !important のルールについて、使い方がよく分かっていない中でまとめた、自分のためのメモです。間違っているかもしれませんので、もう少し理解が深まってからまとめ直します。

CSSスタイルートの優先順位

  1. ページ作者のスタイルシート
  2. ユーザー・スタイルシート
  3. ブラウザのデフォルト・スタイルシート

1つのスタイルシート内でも、後から指定したスタイルが優先される。

「id」セレクタは、「class」セレクタより優先される。

!important ルール

!important を使うと、記述場所に関係なくスタイルを優先させることができる。

使い方は、[プロパティ:値]の後に半角スペース、その後に[!important]を配置する。
また、プロパティ毎に指定する必要がある。

 color: #aabbcc !important;

具体的にどうなるか?

最初の行にだけ !important を指定した場合は、

 color: #ff0000 !important;  ←赤を指定
 color: #0000ff;       ←青を指定

赤で表示される。

 

!important を削除すると?

 color: #ff0000;       ←赤を指定
 color: #0000ff;       ←青を指定

後に指定した方が優先され、
青で表示される。