Bestellung von CSS in einem style-Tag

Question

Ich hatte ein Quiz in einer HTML/CSS-Klasse, die ich nehme, um Medienanfragen zu verwenden, um einige divs basierend auf der Bildschirmgröße zu reorganisieren. Der Code, den sie geliefert, dass ich angeblich auf hinzuzufügen, war dies:

<style type="text/css"> 
    /* 
    These are the responsive styles. Throw some breakpoints in here! 
    */ 
    .container { 
    display: flex; 
    flex-wrap: wrap; 
    } 

    .box { 
    width: 100%; 
    } 

    @media screen and (max-width: 400px) { 
    .dark_blue { 
     color: blue; 
    } 
    } 
</style> 

Es gab viel mehr als das, aber das ist der relevante Teil. Ich kam mit diesem:

<style type="text/css"> 
    /* 
    These are the responsive styles. Throw some breakpoints in here! 
    */ 
    @media screen and (min-width: 450px) { 
    .light_blue, .green { 
    width: 50%; 
    } 
    } 
    @media screen and (min-width: 550px) { 
    .red { 
     width: 33.3%; 
    } 
    .orange { 
     width: 66.6%; 
    } 
    } 
    @media screen and (min-width: 800px) { 
    .container { 
     width: 800px; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    } 

    .container { 
    display: flex; 
    flex-wrap: wrap; 
    } 

    .box { 
    width: 100%; 
    } 

    @media screen and (max-width: 400px) { 
    .dark_blue { 
     color: blue; 
    } 
    } 
</style> 

Aber es tat buchstäblich nichts. Die Seite war komplett unverändert. Ich gab schließlich auf und sah die Antwort, hatte sie geschrieben genau das gleiche, die CSS, die ich hatte, nur in einer anderen Reihenfolge:

<style type="text/css"> 
    /* 
    These are the responsive styles. Throw some breakpoints in here! 
    */ 
    .container { 
    display: flex; 
    flex-wrap: wrap; 
    } 

    .box { 
    width: 100%; 
    } 

    @media screen and (min-width: 450px) { 
    .light_blue, .green { 
    width: 50%; 
    } 
    } 
    @media screen and (min-width: 550px) { 
    .red { 
     width: 33.3%; 
    } 
    .orange { 
     width: 66.6%; 
    } 
    } 
    @media screen and (min-width: 800px) { 
    .container { 
     width: 800px; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    } 

    @media screen and (max-width: 400px) { 
    .dark_blue { 
     color: blue; 
    } 
    } 
</style> 

Also meine Frage ist, wie kommt angewendet, um hier und warum didn‘ t mein Code überhaupt etwas tun?

Answer 1

CSS steht für Cascading Style Sheets, so wird es Regeln interpretiert abstürzende, wenn Sie also

haben

.blue { color: blue; } 

Und dann später auf der gleichen CSS-Datei, setzen Sie

.blue { color: pink; } 

Es überschreibt die color von .blue zu pink

Mit Medienabfragen möchten Sie Ihre Standard-st hinzufügen Zuerst fügen Sie Ihre Medienabfragen hinzu, da sie zuerst Medienabfragen erkennen und dann diese Regeln anstelle des Standardstylings verwenden.

Da der Browser der Lage sein wird (zum Beispiel), um Ihre Geräte zu erkennen min-width ist 800px, wird es diese Stile und nicht die Mühe abholen, sie zu überschreiben, wenn die Datei weiter unten in Ihrem Standard-Styling

interpretiert wird

Schwer zu erklären. Hoffe, dass diese Art Dinge geklärt