【CSS】優先順位復習してみる。
1.【記述順】CSSは上から順に読み込まれる為一番下に書いた方が優先されます。
p{color:red;}
p{color:yellow;}
p{color:blue;}/*←優先される*//
2.【セレクタの種類による優先順位】
兎にも角にも、一番再優先されるのは「idセレクタ」です。「#hoge」ってやつ。
その後に「classセレクタ」「.hoge」が続き、その後に「タイプセレクタ（要素セレクタ）」、「p,h1～h6等」
最後に「ユニバーサルセレクタ(*)」となります。
ちなみに、要素を指定しないセレクタより、要素を指定したセレクタのほうが優先されます。
3.【伝家の宝刀「!important」で優先順位の法則を破る】
p{color:red;!important}/*←上書きされずに優先される*/
p{color:yellow;}
p{color:blue;}
優先させたい所に記述すれば、思い通りに装飾がしやすいと思われますが、
通常の上から順に読み込んでいく性質を無視して、上、下、上、下と読み込ませる事になるので、
当然読み込みに負荷がかかりますし、基本構造をキチンと作った上でコーディングするのが基本なので、頻繁に使いまくるのはどうかと思います。
お急ぎの時、どうしてもにサクッとテストで使用する感覚で使う程度がいいのかなという印象です。あと、CMSなどで、デフォルトのコードに邪魔された時に使うのもいいかと思います。
私は、複数の制作会社で作成していてどうしても使わなければいけないときなどに使ったりします。
CSSの優先順位は結構基本なので覚えておいて損はないと思います。
【参考サイト】
(K)CSSの基礎知識!importantでプロパティ値の優先順位を変更(CSS覚え書き)
!importantはもう使わない！CSSの優先順位をおさらいしよう