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

ＣＳＳスタイルートの優先順位

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

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

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

!important ルール

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

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

例

　color: #aabbcc !important;

具体的にどうなるか？

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

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

赤で表示される。

 

!important を削除すると？

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

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