なぜ! important を使用する必要があるのでしょうか?

CSS では、「!重要」は CSS プロパティの値とともに使用するキーワードです。 CSS プロパティ値で「! important」を使用すると、ブラウザは同じ要素の他のプロパティ値よりもそのプロパティ値をより重要視します。

ここでは、CSS プロパティ値で「! important」を使用する必要があるいくつかの使用例を示します。

• コンテンツ管理システム (CMS) では、Web ページの CSS を編集できません。そのため、Web ページに追加の CSS を追加した場合、特定の要素に適用することはできませんが、CSS で '! important' を使用すると、特定の CSS プロパティの初期値をオーバーライドできます。

• ReactJS、Svelte などの Web フレームワークで UI ライブラリを使用するときは、UI コンポーネントの CSS を編集できないことがあります。このような場合、CSS プロパティで「! important」を使用して、その値をオーバーライドできます。

• リアルタイム アプリケーションには大きな CSS ファイルが含まれています。場合によっては、不明なオーバーライドにより CSS が要素に影響を与えないことがあります。この場合、「! important」を使用して、特定の要素の特定のプロパティのすべての値をオーバーライドできます。

＃＃＃構文＃＃＃

ユーザーは、以下の構文に従って、CSS プロパティ値で「!重要」を使用できます。

リーリー

上記の構文では、CSS-property には、margin、padding、padding-left、font-size などの任意の CSS プロパティを指定でき、value には CSS プロパティの値が尊重されます。

＃＃＃例＃＃＃

以下の例では、「black」、「grey」、「red」というクラス名を持つ 3 つの div 要素を作成しました。 CSS では、クラス名に基づいて div 要素に背景色を与えています。

また、「background-color: ピンク」CSS プロパティを「! important」キーワードを持つすべての div 要素に適用しました。出力では、「! important」を使用したため、すべての div の背景色がピンクになっていることがわかります。

リーリー ＃＃＃例＃＃＃

以下の例では、2 つの異なる段落を作成しました。ある段落にはクラス名として「one」が含まれており、別の段落にはクラス名として「two」が含まれています。すべての

に CSS を適用しました。要素.

クラス名「one」を持つ要素の CSS をオーバーライドするには、「!重要」キーワードを使用して、「

」要素に適用されるスタイルをオーバーライドします。出力では、最初の段落に異なるスタイルがあることがわかります。

リーリー ＃＃＃例＃＃＃

以下の例で、別の「! important」を使用して「! important」をオーバーライドする方法を学習します。 「initial」、「middle」、「final」のクラス名を持つ 3 つの div 要素を作成しました。

背景色の CSS プロパティで「!重要」を使用し、div 要素に適用しています。したがって、最初はすべての div 要素の背景が水色になります。その後、再度背景色の CSS プロパティで「! important」を使用し、それをクラス名「middle」と「final」の要素に適用しました。

出力では、ブルーとライトサーモンの色が「アクア」の色をオーバーライドしていることがわかります。

リーリー

結論

ユーザーは CSS で「!重要」の使い方を学びました。基本的に、「! important」の過度の使用は避けるべきです。そうしないと、要素の CSS がオーバーライドされるため、多くの「! important」を解決するのは誰にとっても頭の痛い問題になる可能性があります。

ただし、ユーザーはライブラリのコンテンツ管理システムまたは UI コンポーネントの CSS を更新するときに「!重要」を使用できます。

以上がなぜ! important を使用する必要があるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。