Какой приоритет CSS стилей у медиа запросов?

Dmitriy_2014
На сайте с 01.07.2014
Offline
276
1335

Всем привет!

Когда прописываешь стили для медиа запросов под определенное разрешение они по идее по приоритету перебивают стандартные стили, когда работаешь под определенным разрешением экрана, то есть имеют самый высокий приоритет и заменяют стили которые имеются в обычном style.css, если только нет директивы !important?

Заранее спасибо за ответы!

gribbo
На сайте с 01.03.2012
Offline
66
#1

не всегда, даже !important можно перебить через родителя

покурите документацию, там будут примеры

Мой выбор хостинга (https://beget.com/p461662) \ Создаю сайты (/ru/forum/1009089)
S
На сайте с 30.09.2016
Offline
469
#2

gribbo, заканчивай чушь пороть.

---------- Добавлено 11.07.2019 в 17:42 ----------

Dmitriy_2014:
они по идее по приоритету перебивают стандартные стили
Обычное поведение, предыдущие правила перебиваются последующими правилами.
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#3

Тут такое дело, я спросил из-за того, что иногда бывает так что у плагинов есть свои css стили, и пытаясь их переопределить в своем файле темы, бывает они как это не странно не переопределяются именно в мобильной версии @media, но если использовать !important(Лишь бы работало, правильно неправильно это неважно.), то стиль срабатывает под мобильный размер. И вот не понятно то ли приоритет какой-то, толи если используются плагинные стили, то мои медиа не перебивают ихние. Как-то получается, что стиль в плагине важнее стиля в моей теме и только !important(А это говорят решение не очень по фэншую.) может помочь.

S
На сайте с 30.09.2016
Offline
469
#4

Да уж... Мир полон загадок... 🙄

tommy-gung
На сайте с 22.11.2006
Offline
287
#5

Dmitriy_2014, стили плагина, вероятно, подключаются ниже основных

и при одинаковом определении будут приоритетнее

Здесь не могла быть ваша реклама
Алеандр
На сайте с 08.12.2010
Offline
183
#6

Dmitriy_2014,

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

Вообще, я в таких случаях делаю проще: все изменения "поверх" стандартного шаблона выношу в выделенный стиль, который подключаю последним, в зависимости от движка. Да хоть в футере, если это не будет сильно отражаться в процессе загрузки сайта. Тогда сначала раскидываются все штатные стили, потом стили плагинов и прочих надстроек и уже гарантированно последним будет загружен мой стиль, который перекроет все то, что было выше. Удобно править, удобно обрабатывать, не нужны никакие лишние important. Конечно так чуток больше кода, зато не вызывает проблем ни обновление, ни правка.

Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#7

tommy-gung, Алеандр,

Спасибо за ответы, видимо одна из причин это расположение css кода, выше, ниже, получается с одной стороны некоторые стили без проблем переопределяются, а некоторые нет и приходится использовать !important тогда они точно переназначаются, но в самом плагине править css я не могу т.к. после обновления все слетит и остается использовать для некоторых стилей импортант в своем стилевом файле. Хотя это странно т.к. вроде медиа запросы и сделаны для изменения стандартных стилей под свои под определенным разрешением экрана, а на деле получается это не всегда так.

gribbo
На сайте с 01.03.2012
Offline
66
#8

Sitealert, человек спросил про !important, получил ответ.

чушь не чушь, но какой фон пойдет?)

body #container {
background: blue !important;
}

#container {
background: red !important;
}
S
На сайте с 30.09.2016
Offline
469
#9

gribbo, не задавай дурацких вопросов. Это же элементарная комбинация селекторов, позволяющая конкретизировать правило. К вопросу в стартпосте не имеет никакого отношения.

богоносец
На сайте с 30.01.2007
Offline
753
#10
Dmitriy_2014:
бывает они как это не странно не переопределяются именно в мобильной версии @media

Во всех остальных, включая выше расположенные @media (при выполнении её условия) стили определяются... Как-то об этом забывают.

В ниже расположенных @media стили можно определить иначе.

Может вы условия не в том порядке расположили...

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий