CSS:「!important」を使用し優先的にスタイルを適用させる

CSSでスタイルが適用される順番は、基本的には最後に読み込まれたスタイルが適用されます。
しかし、最初に読み込まれたスタイルを優先的に読み込ませたい場合があります。

CSSで「!important」を使用すると指定したスタイル優先的適用させることが可能です。


「!important」の使用方法

「!important」の記述は下記のように
値の後に半角スペースを空けて記載します。

div {
	プロパティ: 値 !important;
}

下記のように設定した場合「!important」を使用した方のスタイルが優先的に適用されます。
なので、HTMLで記載した文字列の色は「#000000」で出力されます。


CSS

<style type="text/css">
div#main {
    color: #000000 !important;
}

div#main {
    color: #999999;
}
</style>

HTML

<div id="main">
テキスト文字列
</div>

「!important」を記述しない場合は、後に読み込まれた方のスタイルが
適用されるので文字列の色は「#999999」で出力されます。