Делает!важное правило переопределить медиа-запросы?

Так, например, если бы у меня был медиа-запрос, а также некоторые регулярные CSS с !важное правило на вещи, это повлияет?

например: 

a{
    color:#0000FF!important;
}
@media (max-width: 300px){
    a{
        color:#FF0000;
    }
}
6
css media-queries

2 ответов

медиа-запросов и @media правила не влияют на поведение !important в любом случае, потому что они не имеют никакого влияния на любой части каскада. (По расширению это также означает вы не можете использовать @media at-rule для "удаления"!important флаг, даже если вы используете более конкретный селектор.)

когда ваш медиа-запрос сопоставлен, браузер видит следующее:

a{
    color:#0000FF!important;
}
a{
    color:#FF0000;
}

и когда это не так, он видит это:

a{
    color:#0000FF!important;
}

оба случая приводят к тому, что первый набор правил имеет приоритет, но не препятствуют, например,!important объявление с более конкретным селектором или !important встроенный стиль, от переопределения его.

вот еще один пример, который иллюстрирует это лучше:

a{
    color:#0000FF!important;
}
@media (max-width: 300px){
    a:link,a:visited{
        color:#FF0000!important;
    }
}

когда медиа-запрос сопоставлен, браузер видит это:

a{
    color:#0000FF!important;
}
a:link,a:visited{
    color:#FF0000!important;
}

это приводит к тому, что второе правило имеет приоритет, потому что оно имеет более конкретное селектор (по крайней мере для a элементы, которые соответствуют псевдо-классу). Если он не соответствует медиа-запросу, то только первое правило будет иметь какой-либо эффект, как указано выше.

7

Да. Обычно, если вам нужно использовать !important, что-то можно улучшить в коде. Здесь вы можете видеть, что он переопределяет изменение медиа-запросов:JS Fiddle

Если убрать !important сформировать код, медиа-запрос работает так, как задумано:JS Скрипка работает должным образом

рекомендуется читать, когда использовать !important:
При Использовании !важен правильный выбор

1