CSS でインライン `! important` スタイルをオーバーライドするにはどうすればよいですか?

インライン ! important スタイルのオーバーライド

CSS では、! important フラグは、スタイル プロパティが他のすべてのプロパティよりも優先されることを示すために使用されます。宣言。ただし、スタイルシートの ! important を使用してインライン スタイルをオーバーライドする必要がある状況が発生する場合があります。

次の HTML 要素を検討してください。

<code class="html"><div style="display: none !important;"></div></code>

この要素を表示したい場合は、インライン スタイルをオーバーライドしないため、スタイルシートで別の ! important ルールを単純に使用することはできません。

解決策

インライン スタイルを ! important でオーバーライドするには、より具体的なセレクターでは ! important フラグを使用する必要があります。この場合、次のようなクラス セレクターを使用できます:

<code class="css">div.visible {
  display: block !important;
}</code>

このルールは、可視クラスを持つ任意の div 要素をターゲットにし、インライン表示: none スタイルをオーバーライドして、要素を可視にします。

<code class="html"><div style="display: none !important;" class="visible"></div></code>

この手法は、スタイルシートで使用するセレクターがインライン セレクターよりも具体的である場合にのみ機能することに注意してください。さらに、CSS コードの保守が困難になる可能性があるため、! important を過度に使用しないことを一般的に推奨します。

以上がCSS でインライン `! important` スタイルをオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。