Переопределяющий медиа-запрос CSS по умолчанию.

Я получаю это от подключаемого модуля Chrome ADB, подключаясь к моему телефону через USB. В принципе, я могу проверять элементы на моем Chrome и просматривать или изменять их на моем подключенном ПК.

Я получаю эту странную проблему. Я думал, что медиа-запросы должны были отменять общие правила класса, но если вы видите этот образ, вы можете увидеть, что правила медиа-запросов переопределяются. Я могу исправить это, добавив !important, но я бы предпочел, я также понимаю, что правило для контейнера h1, не связанного с мультимедиа, объявляется ПОСЛЕ правила СМИ. Я не уверен, что именно поэтому, или есть другая причина. Может ли кто-нибудь объяснить, почему это происходит?

enter image description here

Код CSS:

@media screen and (max-device-width: 767px) {
  .container > h1 {
    font-size: 40px;
    line-height: 40px; }
    ...some more rules... }
.container > h1 {
    margin: 0;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px; }

EDIT - Добавлен пример

Смотрите это: http://jsfiddle.net/djuKS/ Обратите внимание, что если вы замените порядок правил, поведение будет таким, как ожидалось. Но по умолчанию запрос на мультимедиа переопределяется

Ответы

Ответ 1

Я думал, что медиа-запросы должны были отменять общие правила класса,

Правила внутри MQ - это правила, подобные любому другому, с точки зрения приоритета их селектора, за исключением того, что они будут применяться только в зависимости от условий носителя.

(...) Я также понимаю, что правило для не-медиа-запросов контейнер h1 объявляется ПОСЛЕ правила для медиа-запросов.

Вы нашли правильную причину: оба правила имеют точно такой же приоритет (специфика), поскольку у них есть тот же самый селектор. Если свойство является частью обоих правил (и объявление является допустимым, и оба из них или ни один из них не имеет модификатора !important), тогда будет применяться значение последнего объявления, написанное.
Эта причина, по которой вы всегда найдете MQ, написанную в конце (кроме правил, применяемых к IE8- через условные классы, не существует возможного совпадения между MQ и современными браузерами и IE8-:))