Порядок 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> 

Но это буквально ничего не изменило. Страница полностью не изменилась. В конце концов я сдался и посмотрел на ответ, они написали точно так же, КСС, что я имел, только в другом порядке:

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

Так что мой вопрос, как же порядок получить применяется здесь и почему Ждут» t мой код вообще ничего не делает?

Answer 1

CSS означает каскадные таблицы стилей, так что правила будут интерпретироваться сбегающие вниз, так что если у вас есть

.blue { color: blue; } 

а потом вниз тот же файл CSS, вы кладете

.blue { color: pink; } 

Он перезапишет color от .blue до pink

С медиа-запросами вы хотите добавить свою страницу по умолчанию сначала, а затем добавьте свои медиа-запросы, потому что сначала он обнаружит медиа-запросы, а затем просто использует эти правила вместо вашего стиля по умолчанию.

Поскольку браузер будет в состоянии обнаружить (например) устройства min-width является 800px, она будет забрать эти стили и не потрудился переписать их, когда файл будет истолкован далее вниз в вашей стилизации по умолчанию

Сложно объяснить. Надеюсь, что вроде очищенные вещи вверх