CSS の特異性を使用して既存の Web サイト CSS をオーバーライドする方法

新しい CSS ファイルによる Web サイトの CSS のオーバーライド: CSS の特異性について

新しい CSS ファイルを使用して既存の Web サイトの CSS をオーバーライドするには、包括的なCSS ルールの優先順位を決定するメカニズムである CSS 特異性について理解します。

CSS 特異性とは何ですか?

CSS 特異性は、CSS セレクターに重みを割り当てる尺度です。彼らのタイプに基づいて。特異性が高いほど、そのルールに与えられる優先順位も高くなります。セレクターのタイプには以下が含まれます:

• インライン (インライン スタイルの要素)
• ID (例: #id)
• クラス (例: .class)
• 要素 (例: div)

既存の CSS をオーバーライドする方法

既存の Web サイト ファイルから CSS ルールをオーバーライドするには、CSS の特異性を利用できます。考慮すべき重要な点は次のとおりです:

1. 特異性の計算: 特異性は、ルール内の各タイプのセレクターの数を連結することによって計算されます。
2. 優先度: 特異性が等しい場合は、CSS ファイル内の後の宣言が優先されます。
3. 「! important」の使用: 通常は推奨されませんが、「!」を使用できます。 「重要」を使用すると、ルールで他のルールを強制的にオーバーライドできますが、不適切なコーディング方法につながる可能性があるため、慎重に使用する必要があります。

例: インライン スタイルのオーバーライド

次の HTML スニペットを考えてみましょう:

<code class="html"><div id="id">
    <div class="class">
        <section>
            <div class="inline" style="background-color: red">
                <!-- SPECIFICITY 1/0/0/0 -->
            </div>
        </section>
    </div>
</div></code>

次の CSS:

<code class="css">/* SPECIFICITY: 0/1/0/0 */
#id {
  background-color: green
}

/* SPECIFICITY: 0/0/1/0 */
.class {
  background-color: yellow 
}

/* SPECIFICITY: 0/0/0/1 */
section {
  background-color: blue 
}

/* SPECIFICITY: 0/0/1/0 - override inline styles */
.inline {
  background-color: purple !important /*going to be purple - final result */ 
}</code>

この例では、具体性 1/0/0/0 のインライン スタイルは次のようにオーバーライドされます。 CSS の「! important」宣言は、具体性が 0/0/1/0 と低くても、CSS の特異性を理解することが重要です。

結論

CSS の特異性を理解することが重要です既存の Web サイトの CSS を独自のルールで効果的にオーバーライドします。この記事で説明した原則を利用すると、目的のスタイルを具体的にターゲットにしてオーバーライドする新しい CSS ファイルを作成でき、ソース HTML を変更せずに Web サイトの外観をカスタマイズできます。

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