【css】指定したとおりにブラウザの表示が変わらないときの解決方法！

cssを記入していて、ちゃんと記述したのにブラウザで確認してみると適応されていないなんてことはありませんか？
そんな時は適応されていない箇所のHTML部を確認してみましょう！cssには表示させるための優先順位があります。

一番下に記述されているものが優先される

まずcssは一番下に記述したものが優先されます。

<p>色指定</p>

p{
color:red;
}

p{
color:blue;
}

色指定

上記のように下に記述した【blue】のほうが優先されているのが見て取れます。

セレクタの優先順位

そもそもセレクタってなに？

セレクタとは皆さんもよく使うであろう【id】や【class】【div】【p】【h1】といったもののことです。

表示される優先順位

一つの要素に【div】【class】【id】を同時に二つ、あるいは三つ記述することは多々あると思います。この三つには優先順位が存在し、同じプロパティ（例えば色）を指定すると優先順位が高いものが表示されます。その優先順位は

styleでの指定＞id＞class＞div=p=h1

となっています。

<div class="class">色指定</div>

div{
color:red;
}

.class{
color:blue;
}

まず上記のように【div】と【class】について比較してみると、classの方が優先順位が高いのが見て取れます。

<div class="class" id="id">色指定</div>

div{
color:red;
}

.class{
color:blue;
}

#id{
color:yellow;
}

ここに【id】を足すと、色が置き換えられていることが分かると思います。

<div class="class" id="id" style="color:lime;">色指定</div>

div{
color:red;
}

.class{
color:blue;
}

#id{
color:green;
}

さらにhtml記述部において【style】を指定すると、【style】に記述した要素が一番優先されます。
このようにセレクタには表示における優先順位があります。cssを変更したのにブラウザ上では変化がないときは、HTML部を確認してみましょう。

しかしどうしてもHTML部は変更したくないときに役に立つのが【!important】になります！

解決方法の【!important】

【!important】を指定してあげると、これまでの優先順位を無視してそのセレクタの優先順位を一番にひきあげます。
記述は優先したいプロパティの値の後ろ、【;】の手前にしてください。

<div class="class" id="id" style="color:lime;">色指定</div>

div{
color:red !important;
}

.class{
color:blue;
}

#id{
color:green;
}

このように、先ほどまで一番優先順位が低かった【div】で指定したプロパティの赤色が表示されました！

<p>色指定</p>

p{
color:red !important;
}

p{
color:blue;
}

色指定

また下に記述されているものが優先されるというルールも無視します。

まとめ

このように【!important】はセレクタの表示優先順位並びに、一番下に記述されているものが優先されているというルールを無効にします。ただし多様すると自分自身が何を優先しているのかが分からなくなる可能性が大きいので、ここぞという場面で使用することをおすすめします！