Стилове на заявки за медии, които не заменят оригиналните стилове - css3, заявки за медии

Опитвам се да използвам някои медийни заявки зауебсайт, който изграждам. Проблемът, който имам обаче, е, докато стиловете на медийните заявки всъщност се прилагат, те "се презаписват. Не мога за живота на мен да кажа защо, защото използвам същото точно селектори. Може ли някой да посочи нещо, което не виждам?

ОРИГИНАЛЕН CSS

#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}

MEDIA QUERY CSS

@media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}

Втората заявка за медия работи добре, където аззадайте навигацията да има дисплей на нито един. Въпреки това, когато се опитам да настроя ширината на # global-wrapper-inner на 100%, тя не се прилага. Мога да видя как се прилага стила, когато натисна F12 и изберете този елемент. Самият стил обаче е зачеркнат навън и не всъщност прилага се и все още има първоначалната ширина 85%.

Отговори:

67 за отговор № 1

Селекторите в оригиналния ви CSS са еднакви специфичност като селекторите във вашите медийни заявки (първите декларации също са насочени към едно и също свойство - width) и тъй като наборът от правила за медийни заявки е отменен, ще приема, че се появява преди оригиналния набор от правила.

Вторият селектор на заявки за медия работи, защото "е насочен към свойство, което не е зададено в оригиналния ви CSS, така че спецификата не е релевантна.

За да имате предимството на първия селектор на заявки за медии, добавете към него елемент на предците:

@media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}

---

1 за отговор № 2

От поне 2 часа се опитвам да намеря преодоления проблем с CSS, докато установих, че моята линия коментира, когато греши ... И второто определение на CSS не работи:

Така че, не бъди толкова глупав като мен!:

/* LITTLE SCREENS */

@media screen and (max-width: 990px) {
... whatever ...
}

/*  BIG SCREENS */

@media screen and (min-width: 990px) {
... whatever more ...
}

никога не използвайте: Двойна лента, както направих:

// This is not a comment in CSS!

/* This is a comment in CSS! */

---

0 за отговор № 3

Трябва да свържете файла с медийни заявки (queries.css) по-късно от нормалния css файл (style.css). По този начин правилата в queries.css ще надменят тези в style.css.

---

0 за отговор № 4

Ами използването !important? Ако сте обхванали вашата медийна заявка ( min-width: 176px ) и ( max-width: 736px ) или дори до 980px?

---