Правила запроса СМИ не имеют приоритета

Question

Так что я работаю над сайтом, имеющим странную проблему с медиа-запросом, причем некоторые из правил переопределяются. Это шаблон, поэтому есть базовый CSS-фрейм, а затем еще один шаблонный CSS-файл, который появляется после. Для ясности, это порядок в моем HTML файл

<link href="/themes/Base/base.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the base rules, including the base mobile rules--> 
<link href="/themes/MyTheme/theme.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the theme specific overrides--> 

В base.min.css я эти правила:

@media all and (max-width: 800px) { 
.... 
#menu { 
position: relative; 
width: 100%; 
min-height: auto; 
margin: 0px; 
padding: 0px; 
top: 0px; 
right: 0px; 
text-align: center; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-top-width: 1px; 
border-top-style: solid; 
background-image: none; 
} 
.... 

Затем в theme.min.css файл, который приходит после того, как в HTML-файл, у меня есть эти правила

.... 
#menu { 
box-sizing: border-box; 
text-align: left; 
padding: 10px; 
min-height: 320px; 
width: 300px; 
box-shadow: 0 0 5px #000000; 
position: relative; 
margin: -20px 0 0 0; 
z-index: 100; 
background-position: bottom right; 
background-repeat: no-repeat; 
background-image: url(/themes/global/images/watermarks/watermark9.png); 
} 
.... 

Обратите внимание, что второй набор правил не содержится в запросе на медиа. Несмотря на это, большинство правил в нем переопределяют предыдущие правила. Высота, ширина, фоновое изображение и т. Д. Я предположил, что приоритеты медиазаписей будут иметь приоритет, если все остальное будет равным (несмотря на то, что оно произойдет позже) из-за повышенной специфичности. Я имею в виду, я мог бы ударить кучу !important; там, если понадобится, но это похоже на бандайду, а не на решение.

Answer 1

По существу, ваш второй набор CSS - это медиа-запрос «все», и, как это происходит после правил максимальной ширины, он также применяется к представлению max-width 800px.

Я правильно понял, что некоторые из этих правил не должны применяться под 800px? Если это так, поместите их в правило минимальной ширины, а затем они не будут использоваться. Например, в теме.css:

#menu { 

    /*Put rules for any width in here*/ 

}  

@media all and (min-width: 801px) { 
    #menu { 
     /*Put rules you don't want inherited by max 800 in here*/ 
     min-height: 320px; 
     width: 300px; 
     ... 
    } 
}