勉強日記 1日目スタイル指定の優先度

CSSが読まれる優先度なるものが存在する。 一番最初に書いてあるものが優先度高そうに思うけれど、実は一番最後。 下みたいな感じだと、h1は赤くなる。

|css| h1 { color: green ;} h1 { color: white ;} h1 { color: blue ;} h1 { color: red ;} ||<

さらに優先度が高いのが、インラインに書いたもの。 つまりhtmlのbody内に書かれたものになる。

|html|

aaaaaaaa

||<

こんな感じなら上で赤になってても、h1は白くなる。

さらにさらに高いのが、詳細度の高いものになる。 詳細度というのが実際よく分かってないけれど、idつきやclassつきのものをいう。 id/class/要素という順で優先度が高い。

|css| #main h1 { color: green ; }||<

こんな感じだと、上で白でも、ここでは緑になっちゃうね！すごいね！！！

んで、一番優先度がたかいのが、!importantというやつ。 使い方は値のケツのほうにつけて使う感じ。

|css| #main h1 { color: green !important; }||<

これで緑の文字色が最強になりました。