ソースコードにアクセスせずに、既存の Web サイト CSS を新しいファイルでオーバーライドする方法

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

概要

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

CSS の仕様の概念

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

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

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

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

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

例

次の 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 を新しいファイルでオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。