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

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

CSS 特異性とは何ですか?

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

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

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

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

1. 特異性の計算: 特異性は、ルール內(nèi)の各タイプのセレクターの數(shù)を連結(jié)することによって計算されます。
2. 優(yōu)先度: 特異性が等しい場合は、CSS ファイル內(nèi)の後の宣言が優(yōu)先されます。
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 の特異性を理解することが重要です。

結(jié)論

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

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