ソース アクセスのない新しいファイルで現(xiàn)在の Web サイトの CSS を上書きする

概要

ソースコードを変更せずに Web サイトの外観を維持するのは困難な場合があります。この質(zhì)問では、ソース レベルでアクセスできない Web サイト上の既存の CSS ファイルをオーバーライドする新しい CSS ファイルを作成することでこれを?qū)g現(xiàn)する方法について説明します。

CSS の仕様の概念

To既存の CSS をオーバーライドする方法を理解するには、CSS の特異性の概念を理解することが不可欠です。ルールで使用されるセレクターに基づいて、どの CSS 宣言が要素に適用されるかを決定します。特異性は次のように計算されます:

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

新しい CSS ファイルで現(xiàn)在の CSS をオーバーライドする

既存の CSS ファイルをオーバーライドするには、次のアプローチを検討してください。

1. インライン スタイル (詳細(xì)度: 1 | 0 | 0 | 0): HTML 要素に直接追加されたインライン スタイルの詳細(xì)度が最も高くなります。ただし、適用範(fàn)囲が限られているため、Web サイト全體の上書きには推奨されません。
2. ID セレクター (特異性: 0 | 1 | 0 | 0): ID セレクターはクラスよりも高い特異性を持っています。または要素セレクター。特定のコンテキスト內(nèi)で異なるスタイルを設(shè)定する必要がある固有の要素にこれらを使用します。
3. クラス セレクター (詳細(xì)度: 0 | 0 | 1 | 0): クラス セレクターは、既存のものをオーバーライドする場合にも推奨されます。スタイル。特定のクラスを要素に割り當(dāng)て、新しい CSS ファイルでクラス セレクターを使用すると、既存の CSS ファイルによって適用されたスタイルをオーバーライドできます。
4. 要素セレクター (特異性: 0 | 0 | 0 | 1): 要素セレクターの特異性が最も低くなります。これらは、既存のスタイルをオーバーライドする目的で、より具體的なセレクターを適用できない場合にのみ、慎重に使用する必要があります。
5. ! important 宣言: ! important 宣言を使用すると、ブラウザーは、指定されたスタイルに関係なく、指定されたスタイルを強(qiáng)制的に適用します。その特異性について。ただし、意図しない結(jié)果が生じ、スタイル間の一貫性を維持することが困難になる可能性があるため、慎重に使用する必要があります。

例

次の HTML について考えてみましょう。および CSS:

<code class="html"><article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
        </div>
      </section>
    </div>
  </div>
</article></code>

<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 /*going to be purple - final result */ 
}</code>

クラス セレクターを使用し、特異性の概念を活用することで、既存の CSS スタイルを効果的にオーバーライドし、新しい CSS で定義されたスタイルに従って Web ページの外観をカスタマイズできます。ファイル。

以上がソースコードにアクセスせずに、既存の Web サイト CSS を新しいファイルでオーバーライドする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。