[解決済み] CSSで!importantプロパティを使用するタイミング [重複]...
2023-03-04 20:30:02
質問
を考えてみましょう。
#div p {
color: red !important;
}
...
#div p {
color: blue;
}
私は、どのように
!important
がどのように機能するかは理解しています。この場合、div が赤くレンダリングされるのは、div が優先されるからです (
!important
). しかし、私はまだこれを使用する適切な状況を把握することができません。以下のような例はありますか?
!important
がその日を救うような例はありますか?
どのように解決するのですか?
これは実際のシナリオです。
このシナリオを想像してください
- サイトの視覚的な側面をグローバルに設定するグローバル CSS ファイルがあるとします。
- あなた (または他の人) は、要素自体にインラインスタイルを使用しています。 <ストライク 通常 であり、非常に悪い習慣です。
この場合、グローバル CSS ファイルで特定のスタイルを重要なものとして設定し、こうして要素に直接設定されたインラインスタイルを上書きすることができます。
実際の実例は?
この種のシナリオは、通常、HTML を完全に制御できない場合に発生します。での解決策を考えてみましょう。
シェアポイント
のソリューションを考えてみてください。パートはグローバルに定義(スタイル)されることを望みますが、コントロールできないインラインのスタイルがいくつか存在します。
!important
を使うと、そのような状況に対応しやすくなります。
その他にも、実際のシナリオでは、いくつかのひどい jQuery プラグイン もインラインスタイルを使用します。
もうお分かりだと思いますが そして、他のアイデアも思いつくことでしょう。
どのような場合に
!important
?
を使用しないことをお勧めします。
!important
を使わないことをお勧めします。避けることが可能であれば、いつでも避けましょう。たくさんの
!important
スタイルをたくさん使うと、メンテナンスが少し大変になります。
カスケード
を壊してしまうからです。
関連
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] ラジオボタンをデフォルトで選択するには?[重複しています]
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] CSSにおける「!important」の意味とは?
-
[解決済み】CSSで"!important "を使用する意味は?[重複あり]