Wie ist die Reihenfolge der CSS-Codierung? Detaillierte Erläuterung der CSS-Codierungsreihenfolge

In diesem Artikel erfahren Sie, in welcher Reihenfolge die CSS-Codierung erfolgt. Die detaillierte Erklärung der CSS-Codierungssequenz hat einen gewissen Referenzwert. Freunde in Not können darauf zurückgreifen.

CSS-Codierungsreihenfolge-Recherche Der zuletzt definierte CSS-Stil überschreibt alle vorhandenen oder widersprüchlichen Stile, die zuvor definiert wurden, wie zum Beispiel das folgende Beispiel:

Beispielcode

p { color: red; background: yellow }
p { color: green }

Der obige Absatz wird schließlich in grüner Schrift mit gelbem Hintergrund angezeigt. Dies liegt daran, dass die zuletzt definierte Farbe: Grün die zuvor definierte Farbe überschreibt. Was Gelb betrifft, liegt der Grund dafür, dass kein Konflikt vorliegt Definition in der zweiten Definition von p, daher ist sie weiterhin gültig.

Verstehst du das wirklich? Okay, machen wir einen kleinen Test:

Beispielcode

p.red { color: red }
p.green { color: green }
p.blue { color: blue }

Beispielcode

<p class="red green blue">//m.sbmmt.com/</p>
<p class="green blue red">//m.sbmmt.com/</p>
<p class="blue red green">//m.sbmmt.com/</p>

Entschuldigung, wenn er endlich angezeigt wird, wird der Text in den obigen drei Absätzen so aussehen angezeigt Welche Farbe?

Die Antwort ist, dass sie alle in Blau angezeigt werden, d Beispielsweise wird der erste Stil als blau, der zweite als rot und der dritte als grün angezeigt. Dies hat jedoch nichts mit der Reihenfolge zu tun, in der die Stile angezeigt werden Sie alle folgen letztendlich dem zuletzt angegebenen Stil und die Farbe ist blau.

Wie ist oben die Reihenfolge der CSS-Codierung? Eine vollständige Einführung zur detaillierten Erläuterung der CSS-Codierungsreihenfolge. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie ist die Reihenfolge der CSS-Codierung? Detaillierte Erläuterung der CSS-Codierungsreihenfolge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!