Последовательность выполнения CSS

Question

Мне очень любопытно узнать последовательность выполнения инструкций в файле CSS. У меня есть следующие CSS в файле CSS:

/* screen width larger than 800px */ 
@media screen (min-width: 800px) { 
    .indexphototd { 
      width:200px !important; 
     } 
    .indexphoto { 
     width:200px !important; 
     } 
} 

/* screen width larger than 1200px */ 
@media screen (min-width: 1200px) { 
    .indexphototd { 
      width:300px !important; 
     } 
    .indexphoto { 
     width:300px !important; 
     } 
} 


/* default setting */ 
.indexphototd { 
    width:500px !important; 
    } 
.indexphoto { 
    width:500px !important; 
    } 

В коде выше я объявил 2 вида настроек 2 класса в 2-х различных размеров экрана, и после этого я упоминал 2 заявления без ограничений в отношении размеры экрана (то есть, по умолчанию).

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

Но мне интересно, будут ли настройки по умолчанию отменять определенные параметры экрана, так как я вставил настройку по умолчанию в самом конце. Должен ли я сказать это в начале? Не могли бы вы сообщить мне последовательность выполнения в CSS. Я знаю, что CSS не является языком программирования. Я новичок в веб-разработке и изучаю все эти мелочи. Пожалуйста, помогите мне. Благодарю.

Исаак

Answer 1

Более поздние утверждения переопределяют более ранние версии, поэтому вам нужно перейти к общим.

/* General CSS here */ 

/* CSS for min-width 800 here, overides general */ 

/* CSS for min-width 1024 here, overides both general and 800 */ 

Answer 2

Ваши значения по умолчанию должны быть объявлены перед запросами средств массовой информации.

CSS выполнен «в порядке». Вы хотите, чтобы медиа-запросы переопределяли значения по умолчанию в определенных случаях, поэтому вы должны объявить их после.

Answer 3

CSS обрабатывается сверху вниз, так что если два селектора имеют одинаковую specificity и соответствует тот же элемент, последний в таблице стилей победит.