CSS ！重要なルール
！重要とは何ですか？
CSSの!importantルールは、通常よりもプロパティ/値を重要視するために使用されます。
実際、この!importantルールを使用すると、その要素の特定のプロパティに対する以前のすべてのスタイルルールが上書きされます。
例を見てみましょう：
例
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
例の説明
上記の例では。IDセレクターとクラスセレクターの特異性は高くなりますが、3つの段落すべてが赤い背景色になります。どちらの場合も!important、ルールは
background-colorプロパティを上書きします。
重要について！重要
ルールをオーバーライドする唯一の方法
は、ソースコードに同じ（またはそれ以上の）特異性を持つ宣言!important
に別のルールを含めることです。ここで問題が始まります。!importantこれにより、CSSコードが混乱し、特に大きなスタイルシートがある場合、デバッグが困難になります。
ここでは、簡単な例を作成しました。CSSソースコードを見ると、どの色が最も重要であると考えられているかはあまり明確ではありません。
例
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
ヒント：ルールについて知っておくとよい!important
でしょう。CSSソースコードに表示される場合があります。ただし、どうしても必要な場合を除いて、使用しないでください。
たぶん1つか2つの！importantの公正な使用
使用する1つの方法!importantは、他の方法でオーバーライドできないスタイルをオーバーライドする必要がある場合です。これは、コンテンツ管理システム（CMS）で作業していて、CSSコードを編集できない場合に発生する可能性があります。次に、いくつかのカスタムスタイルを設定して、いくつかのCMSスタイルをオーバーライドできます。
別の使用方法!importantは次のとおりです。ページ上のすべてのボタンに特別な外観が必要であると想定します。ここで、ボタンは灰色の背景色、白いテキスト、およびいくつかのパディングと境界線でスタイル設定されています。
例
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
ボタンをより特異性の高い別の要素内に配置すると、ボタンの外観が変わることがあり、プロパティが競合します。この例を次に示します。
例
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
すべてのボタンを「強制的に」同じ外観にするために!important
、次のように、ボタンのプロパティにルールを追加できます。
例
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}