Стили медиа-запросов не перекрывают оригинальные стили

Я пытаюсь использовать некоторые медиа-запросы для веб-сайта, который я создаю. Однако проблема, с которой я столкнулась, заключается в том, что на самом деле применяются стили запросов к медиа, они переопределяются. Я не могу на всю жизнь рассказать, почему, потому что я использую те же самые точные селекторы. Может ли кто-нибудь указать на то, чего я не вижу?

ОРИГИНАЛЬНЫЙ 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;
    }

МЕДИА-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%.

Ответ 1

Селекторы в исходном CSS имеют те же specificity, что и селектора в ваших медиа-запросах (первые объявления также нацелены на то же самое свойство - 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;
    }
}

Ответ 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! */

Ответ 3

Вам нужно связать файл медиа-запросов (queries.css) позже обычного файла css (style.css). Таким образом, правила в queries.css будут переопределять правила в style.css.