CSS !important规则
!importantとは何か
CSS の !important ルールは、スタイルの重みを増やすために使用されます。
!important優先度とは無関係ですが、最終的な結果に直接関連しています。!important ルールを使用すると、この宣言は他のどの宣言よりも優先されます。
实例
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
尝试一下 »
上記の例では、IDセレクタとクラスセレクタの優先度が高いにもかかわらず、3つの段落の背景色はすべて赤で表示されます。!important ルールが background-color プロパティを上書きするためです。
重要说明
!important を使用することは悪い習慣であり、できるだけ避けるべきです。なぜなら、これはスタイルシートに本来備わっているカスケード規則を壊し、バグのデバッグや発見をより困難にするからです。
相互に競合する !important ルールを持つ2つの宣言が同じ要素に適用される場合、より高い優先度を持つ宣言が採用されます。
次の例では、CSSソースコードを見ても、どの色が最も重要かはあまり明確ではありません：
实例
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
尝试一下 »
使用建议：
- 一定問題を解決するには、スタイルルールの優先度を使用することを優先し、〜ではなく
!important - 只有全サイトまたは外部 CSS を上書きする必要がある特定のページで使用します。
!important - 永远不要プラグインでの使用方法
!important - 永远不要サイト全体の CSS コードで使用します。
!important
!importantを使用すべきタイミング
ウェブサイトにサイト全体の CSS スタイルを設定したい場合は、!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;
}
尝试一下 »