特異性を使用して Web サイトの CSS スタイルをカスタム CSS でオーバーライドする方法

カスタム CSS による Web サイトの CSS スタイルのオーバーライド

Web サイトは自動的に組み込まれた 3 つの CSS ファイルで構成されており、index.html ファイルにアクセスできません。ただし、Web サイトの CSS ファイルを制御することができ、新しい CSS ファイルを作成して既存の CSS ファイルを上書きしようとしています。

@import url(css4.css) を使用するのは初めての試みかもしれませんが、失敗しました。最後の CSS ファイルのスタイルをオーバーライドします。この問題は、「CSS の特異性」の概念に起因します。

CSS の特異性

CSS の特異性は、要素のスタイル宣言の優先順位を決定します。これは 4 つのコンポーネントで構成されます:

• Inline: 要素に直接適用されるスタイル
• Id: を使用して要素に適用されるスタイルID
• クラス: クラス
• 要素: 特定の要素タイプのインスタンスに適用されるスタイル

各コンポーネントの重みは次の形式で表されます。 ID |クラス |要素。いずれかの列の重みが大きいほど、特異性が高くなります。

特異性の競合の解決

既存の CSS スタイルをオーバーライドするには、新しい CSS の特異性が競合するスタイルよりも高いことを確認する必要があります。たとえば、既存の CSS がクラス セレクターを使用している場合、カスタム CSS で ID またはインライン セレクターを使用する必要があります。

詳細な詳細例

提供されたコードは、実際の CSS の特異性を示しています。 :

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
#id {background-color: green}
.class {background-color: yellow }
section {background-color: blue }
.inline {background-color: purple !IMPORTANT }</code>

背景色: red のインライン スタイルを使用すると、インライン スタイルの方がより高い特異性 (1|0|0|0) を持っているにもかかわらず、紫色に表示されます。これは、カスタム CSS が .inline クラスに ! important を設定し、そのスタイルが他のすべてをオーバーライドする必要があることを示すためです。

結論

CSS の特異性を理解すると、Web サイトのプレゼンテーションを正確に制御できます。要素。より高い特異性の値を意図的に使用することで、元の Index.html ファイルを編集することなく、既存の CSS スタイルを簡単にオーバーライドしてカスタム デザインを作成できます。

以上が特異性を使用して Web サイトの CSS スタイルをカスタム CSS でオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。