Wie überschreibe ich das CSS einer Website mithilfe einer neuen CSS-Datei mit höherer Spezifität?

Wie kann ich die CSS-Dateien einer Website mithilfe einer neuen CSS-Datei überschreiben?

Herausforderung:

Sie haben eine Website mit mehreren CSS-Dateien, aber Sie haben keinen Zugriff auf den Quellcode. Ihr Ziel ist es, eine neue CSS-Datei zu erstellen, die die vorhandenen Stile überschreibt, ohne dass die Möglichkeit besteht, die Datei index.html zu ändern.

Lösung:

Verstehen der CSS-Spezifität :

Um vorhandene Stile zu überschreiben, müssen Sie das Konzept der CSS-Spezifität verstehen. Die Spezifität bestimmt, welche Stile auf Grundlage der verwendeten Selektoren auf ein Element angewendet werden. Es wird als Verkettung der Anzahl verschiedener Selektortypen (Inline, ID, Klasse, Element) berechnet.

Verwenden Sie einen spezifischeren Selektor:

Um Ihren eigenen Selektor sicherzustellen Da die CSS-Datei Vorrang hat, verwenden Sie Selektoren mit höherer Spezifität als die Selektoren in den aktuellen CSS-Dateien. Beispielsweise hat ein Selektor wie „.myClass“ eine Spezifität von 0/0/1/0 und würde einen Selektor wie „div“ mit einer Spezifität von 0/0/0/1 überschreiben.

Spezifität anwenden:

Stellen Sie sich das folgende Szenario vor:

• currentCSS1.css hat eine Regel für den Körper (Spezifität: 0/0/0/1)
• currentCSS2.css hat eine Regel für .myClass (Spezifität: 0/0/1/0)
• newCSS4.css hat eine Regel für .myClass (Spezifität: 0/0/2/0)

Basierend auf CSS-Spezifitätsregeln überschreibt der in newCSS4.css definierte Stil die Stile in currentCSS1.css und currentCSS2.css für Elemente mit der Klasse .myClass.

Vorsicht mit !important:

Während die Verwendung von !important dazu führen kann, dass einem Stil Priorität eingeräumt wird, wird davon im Allgemeinen für Site-weites CSS abgeraten. Verwenden Sie es nur für seitenspezifisches CSS oder zum Überschreiben von externem CSS.

Berechnung der Spezifität:

Beziehen Sie sich zur Berechnung der Spezifität auf die folgende Hierarchie:

• Inline (1|0|0|0)
• ID (0|1|0|0)
• Klasse (0|0|1|0)
• Element (0|0|0|1)

Die höchste Zahl links hat Vorrang.

Beispiel:

Angenommen Ihre aktuellen CSS-Dateien haben die folgenden Regeln:

<code class="css">body { margin: 0; }
#header { background: blue; }</code>

Um diese Regeln mit einer neuen CSS-Datei zu überschreiben, können Sie den folgenden Selektor verwenden:

<code class="css">#header.myClass {
  margin: 1em;
  background: red;
}</code>

Der Selektor #header.myClass hat eine Spezifität von 0/1/1/1, die beide Regeln in den aktuellen CSS-Dateien außer Kraft setzt.

Das obige ist der detaillierte Inhalt vonWie überschreibe ich das CSS einer Website mithilfe einer neuen CSS-Datei mit höherer Spezifität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!