CSSの優先順位

CSSがはじめての方は先に以下の記事を読んでください。

CSSの優先順位

CSSには優先順位があります。

同じものを二つ書くと下に書いたものが優先されます。

例えば下のような場合

<p>こんにちは、今日は良い天気ですね。</p>

p {
  color: red;
  color: blue;
}

ブラウザの表示では下のように文字が青色になり、赤色は無視されます。

こんにちは、今日は良い天気ですね。

セレクターを下のように分けた場合も同じく下が優先されます。

p {
  color: red;
}
p {
  color: blue;
}

こんにちは、今日は良い天気ですね。

優先順位を強制的に変える

優先順位を変えたいけど、どうしても下に書くことができない場合もあります。その時に使えるのが!importantです。

p {
  color: red !important;
}
p {
  color: blue;
}

こんにちは、今日は良い天気ですね。