Ortam Sorgu kuralları öncelik almıyor

Question

Bir sitede, bir medya sorgusuyla ilgili garip bir sorunla karşılaşıyorum, bazı kurallar geçersiz kılınmış. Bir şablon için, bu nedenle bir 'framework' CSS ve sonra gelen başka bir şablona özgü CSS dosyası var. Anlaşılır olması için, bu benim HTML düzen bu kuralları var base.min.css yılında

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

dosyası geçerli: HTML dosyasında sonra gelir theme.min.css dosyasında Sonra

@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; 
} 
.... 

, ben bu kuralları var

.... 
#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); 
} 
.... 

İkinci kural kümesinin bir medya sorgusunda yer almadığını unutmayın. Buna rağmen, içindeki kuralların çoğu önceki kuralları geçersiz kılıyor. Yükseklik, genişlik, arka plan görüntüsü, vb. Artan özgüllük nedeniyle her şey eşitse (daha sonraya rağmen) medya sorgularının öncelikli olacağını varsaydım. İhtiyacım olursa, orada bir grup !important;'u tokatlayabilirim ama bu bir bandaid gibi değil, bir çözüm gibi görünüyor.

Answer 1

Esasen ikinci CSS grubunuz "her şey" in bir Medya Sorgusudur ve maksimum genişlik kurallarından sonra maksimum genişlik 800px görünümü için de geçerli olacaktır.

Bu kurallardan bazılarının 800px altında uygulanmaması gerektiğini düşünüyor muyum? Eğer öyleyse, onları bir min genişlik kuralına koyun ve sonra kullanılmayacaktır. Örneğin, tema.css içinde:

#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; 
     ... 
    } 
}