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

インライン !重要なスタイルのオーバーライド

CSS スタイルに関しては、インライン宣言が非常に重要です。 ! important フラグは、インライン スタイルをクリティカルでオーバーライドするのが難しいものとしてマークします。ただし、この宣言をオーバーライドする必要がある状況もあります。

一般的な状況の 1 つは、次のようなインライン スタイル セットがある場合です。

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

この要素は次から非表示になります。 display: none 宣言によるビュー。このインライン スタイルをオーバーライドして要素を表示する方法はありますか?

答え:

はい、同様のメソッドを使用してインライン !重要な宣言をオーバーライドすることができます。 CSS スタイルシートのルール。これを実現するには、スタイルシートに次の行を追加します:

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

このルールは、すべての div 要素に対してブロックするように表示プロパティを設定し、インライン宣言を効果的にオーバーライドし、非表示の div を再び表示します。

!重要フラグに関係なく、インライン スタイルは一般的にオーバーライドできることに注意してください。次の例を考えてみましょう:

<code class="html"><p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p></code>

<code class="css">.override {color:red !important;}</code>

この場合、2 番目の段落は赤で表示され、.override クラスに追加された ! important ルールによりインライン color:blue 宣言がオーバーライドされます。

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