Die Reihenfolge der CSS -Klassen in HTML spielt keine Rolle

Das stimmt! Und ich kann es auch beweisen. Schauen wir uns zuerst einige CSS an:

 .A {
  Farbe: Rot;
}

.B {
  Farbe: Blau;
}

Und jetzt schauen wir uns ein Markup an:

 <div> Hier ist ein Text </div>

Der Text wird blau sein, weil .b zuletzt im CSS definiert ist, oder? Aber was ist, wenn wir die Reihenfolge, in der diese Klassen in HTML aufgerufen werden, wechseln und wechseln:

 <div> Hier ist ein Text </div>

Welche Farbe sollte der Text Ihrer Meinung nach sein? Rot oder blau?

Dies mag sicherlich nach einer dummen Frage klingen, aber es neigt dazu, viele Leute zu stolpern, die zufällig mit CSS-in-JS-Lösungen vertraut sind. Und diese Woche habe ich mit zwei sehr hochrangigen Frontendingenieuren gesprochen, die auch ähnlich dachten!

Aber der Text im obigen Beispiel wird immer blau sein, egal in welcher Reihenfolge diese CSS -Klassen sich befinden. Und das liegt daran, dass das Markup nur das CSS in der Reihenfolge liest, in der er geschrieben ist - die Kaskade gewinnt in diesem Beispiel.

Das obige ist der detaillierte Inhalt vonDie Reihenfolge der CSS -Klassen in HTML spielt keine Rolle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!