Nach unserem Verständnis der CSS-Priorität überschreibt der zuletzt definierte CSS-Stil alle vorhandenen oder widersprüchlichen Stile, die davor definiert wurden, wie zum Beispiel das folgende Beispiel:
| Nachfolgend der zitierte Inhalt: Beispiel-Quellcode: p { Farbe: rot; Hintergrund: gelb } |
Der obige Absatz wird schließlich in grüner Schrift mit gelbem Hintergrund angezeigt. Der Grund dafür, dass der gelbe Hintergrund nicht verschwindet, liegt daran, dass die zuletzt definierte Farbe nicht vorhanden ist widersprüchliche Definition in der Definition, daher ist sie immer noch gültig.
Sehen wir uns den Laufeffekt an:
| Nachfolgend der zitierte Inhalt: Quellcode zum Ausführen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html charset=gb2312" /><title>admin5</title><; style type="text/css">p { Farbe: rot; Hintergrund: gelb }p { Farbe: grün }</style></head><body><p>admin5</p></body></ html> <p class="red green blue">www.admin5.com</p> <p class="green blue red">admin5</p> <p class="blue red green">www.admin5.com</p> |
Vielleicht denkst du, du verstehst es bereits. Verstehst du das wirklich? Okay, machen wir einen kleinen Test.
| Nachfolgend der zitierte Inhalt: Beispiel-Quellcode: .red {Farbe: rot} .green { Farbe: grün } .blue { Farbe: blau } ... <p class="red green blue">admin5</p> <p class="green blue red">Das Lernparadies für Webmaster</p> <p class="blue red green">www.admin5.com</p> |
Bitte sagen Sie mir, welche Farbe wird der Text in den drei obigen Absätzen haben, wenn er schließlich angezeigt wird?
Bitte beeilen Sie sich nicht, den folgenden Code auszuführen. Überlegen Sie, welche Farbe er haben wird.
Okay, Sie haben bereits darüber nachgedacht. Lassen Sie uns die Auswirkungen der Operation sehen:
| Nachfolgend der zitierte Inhalt: Quellcode zum Ausführen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html charset=gb2312" /><title>www.admin5.com<; /title><style type="text/css">.red { Farbe: Rot }.green { Farbe: Grün }.blue { Farbe: Blau }</style></head><body><p class=" red green blue">admin5</p><p class="green blue red">Webmaster Learning Paradise</p><p class="blue red green">www.admin5.com</p></body > </html> |
Die Antwort ist, dass sie alle blau angezeigt werden, d , der erste wird als blau angezeigt, der zweite wird als rot angezeigt und der dritte wird als grün angezeigt. Das hat tatsächlich nichts mit der Reihenfolge zu tun in dem die Stile angewendet werden. Letztendlich folgen sie alle dem zuletzt angegebenen Stil, und die Farbe ist blau! Bitte machen Sie sich keine Sorgen, wenn Sie in Zukunft auf ähnliche Probleme stoßen, denn das obige Experiment hat Ihnen bereits die Antwort gegeben.