特異性を使用して Web サイトの CSS スタイルをカスタム CSS でオーバーライドする方法-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-10-24 14:09:02

オリジナル

355 人が閲覧しました

How to Override Website CSS Styles with Custom CSS Using Specificity?

カスタム 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 を設定し、そのスタイルが他のすべてをオーバーライドする必要があることを示すためです。