スタイルタグ内のCSSの順番

Question

私はhtml/cssクラスのクイズを持っていました。画面サイズに基づいて一部のdivを再編成するためにメディアクエリを使用するよう依頼しています。私が追加するはずだったコードは、これでした：

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

それ以上のものがありましたが、それは関連する部分です。私はこれを思いついた：

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

しかし、それは文字通り何もしなかった。ページは完全に変更されていませんでした。私は最終的にあきらめたと答えに、彼らは唯一異なる順序で、私が持っていた正確に同じCSSを書いていたに見えた：

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

だから私の質問で、順序はここに適用され、なぜdidnの取得んか」私のコードは何もしませんか？

Answer 1

CSSのでそこのルールはあなたがして

.blue { color: blue; } 

とを持っている場合は、後で同じCSSファイルの下、あなたが入れたので、ダウンカスケード解釈され、カスケーディング・スタイル・シートの略

.blue { color: pink; } 

colorは.blueからpink

を上書きします。メディアクエリでは、デフォルトのstメディアクエリーを検出してから、デフォルトのスタイリングの代わりにそれらのルールを使用するだけなので、メディアクエリーを追加する必要があります。ブラウザがデバイスmin-width（例えば）を検出することができるようになりますので

は

それはファイルがあなたのデフォルトのスタイルにさらに下に解釈されますときにそれらを上書きするためにわざわざこれらのスタイルをピックアップしていないだろう、800pxある

説明するのは難しい。あなたは何を試してみたい？