Website-CSS mit einer neuen CSS-Datei überschreiben: CSS-Spezifit?t verstehen

Die Verwendung einer neuen CSS-Datei zum überschreiben des CSS einer vorhandenen Website erfordert eine umfassende Verst?ndnis der CSS-Spezifit?t, eines Mechanismus, der die Priorit?t von CSS-Regeln bestimmt.

Was ist CSS-Spezifit?t?

CSS-Spezifit?t ist ein Ma?, das CSS-Selektoren eine Gewichtung zuweist basierend auf ihrem Typ. Je h?her die Spezifit?t, desto h?her ist die Priorit?t, die dieser Regel einger?umt wird. Zu den Selektortypen geh?ren:

• Inline (Element mit Inline-Stil)
• ID (z. B. #id)
• Klasse (z. B. .class)
• Element (z. B. div)

So überschreiben Sie vorhandenes CSS

Um CSS-Regeln aus vorhandenen Website-Dateien zu überschreiben, k?nnen Sie die CSS-Spezifit?t nutzen. Hier sind die wichtigsten zu berücksichtigenden Punkte:

1. Spezifit?tsberechnung: Die Spezifit?t wird durch Verkettung der Anzahl der Selektoren jedes Typs in der Regel berechnet.
2. Priorit?t:Bei gleicher Spezifit?t hat die sp?tere Deklaration in Ihrer CSS-Datei Vorrang.
3. Verwendung von ?!important“:Obwohl generell davon abgeraten wird, k?nnen Sie ?!“ verwenden. wichtig“, um zu erzwingen, dass eine Regel andere überschreibt, sollte jedoch mit Vorsicht verwendet werden, da dies zu schlechten Codierungspraktiken führen kann.

Beispiel: überschreiben von Inline-Stilen

Betrachten Sie das folgende HTML-Snippet:

<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>

Und das folgende 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>

In diesem Beispiel wird der Inline-Stil mit der Spezifit?t 1/0/0/0 überschrieben von die ?!important“-Deklaration im CSS, auch wenn sie eine geringere Spezifit?t von 0/0/1/0 hat.

Fazit

Das Verst?ndnis der CSS-Spezifit?t ist von entscheidender Bedeutung zum effektiven überschreiben vorhandener Website-CSS mit Ihren eigenen Regeln. Mithilfe der in diesem Artikel dargelegten Prinzipien k?nnen Sie neue CSS-Dateien erstellen, die speziell auf gewünschte Stile abzielen und diese überschreiben, sodass Sie das Erscheinungsbild Ihrer Website anpassen k?nnen, ohne den Quell-HTML zu ?ndern.

Das obige ist der detaillierte Inhalt vonSo überschreiben Sie vorhandenes Website-CSS mithilfe der CSS-Spezifit?t. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!