より特異性の高い新しい CSS ファイルを使用して Web サイトの CSS をオーバーライドするにはどうすればよいですか?

新しい CSS ファイルを使用して Web サイトの CSS ファイルをオーバーライドするにはどうすればよいですか?

課題:

Web サイトをお持ちです複数の CSS ファイルが含まれていますが、ソース コードにアクセスできません。 Index.html ファイルを変更することなく、既存のスタイルをオーバーライドする新しい CSS ファイルを作成することを目的としています。

解決策:

CSS の特異性について:

既存のスタイルをオーバーライドするには、CSS の特異性の概念を理解する必要があります。特異性は、使用されるセレクターに基づいて要素にどのスタイルが適用されるかを決定します。これは、さまざまなセレクター タイプ (インライン、ID、クラス、要素) の数を連結して計算されます。

より具体的なセレクターを使用します:

独自のセレクターを確保するにはCSS ファイルが優先されるため、現在の CSS ファイルのセレクターよりも高い特異性を持つセレクターを使用してください。たとえば、「.myClass」のようなセレクターは 0/0/1/0 の特異性を持ち、0/0/0/1 の特異性を持つ「div」のようなセレクターをオーバーライドします。

特異性の適用:

次のシナリオを想像してください:

• currentCSS1.css には本文のルールがあります (特異性: 0/0/0/1)
• currentCSS2.css には .myClass のルールがあります (特異度: 0/0/1/0)
• newCSS4.css には .myClass のルールがあります (特異度: 0/0/2/0)

CSS の特異性ルールに基づいて、newCSS4.css で定義されたスタイルは、クラス .myClass を持つ要素の currentCSS1.css および currentCSS2.css のスタイルをオーバーライドします。

注意with ! important:

! important を使用すると、スタイルを強制的に優先させることができますが、サイト全体の CSS では通常は推奨されません。ページ固有の CSS にのみ使用するか、外部 CSS をオーバーライドする場合にのみ使用します。

詳細度の計算:

詳細度の計算については、次の階層を参照してください:

• インライン (1|0|0|0)
• ID (0|1|0|0)
• クラス (0|0|1|0)
• 要素 (0|0|0|1)

左側の最大の数値が優先されます。

例:

とします。現在の CSS ファイルには次のルールがあります:

<code class="css">body { margin: 0; }
#header { background: blue; }</code>

新しい CSS ファイルを使用してこれらのルールをオーバーライドするには、次のセレクターを使用できます:

<code class="css">#header.myClass {
  margin: 1em;
  background: red;
}</code>

セレクター #header.myClass特異性は 0/1/1/1 で、現在の CSS ファイルの両方のルールをオーバーライドします。

以上がより特異性の高い新しい CSS ファイルを使用して Web サイトの CSS をオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。