2

Есть html страница с разметкой и файл css

В html создаем блок div, в него помещаем div с классом one_ava

Переходим в css, задаем блоку one_ava высоту, ширину и границу 1px solid black, сохраняем (livereload)

В браузере ожидаемо отображается верстка, видна граница блока а также высота и ширина, все ок.

Нажимаем в браузере F5, стили слетают.

Переходим в редактор, ничего не меняем, просто нажимаем Сохранить (livereload)

В браузере снова корректно отображается заветный прямоугольник, но после обновления страницы..

Ситуация повторятся.

Хочу добавить, что сайту не молодой, многостраничный и нигода небыло проблем, работает корректно и на localhost и на сервере, есть куча стилей, которые работают, и отображаются, но в последнее время, слетают все новые добавляемые css стили.

Единственное что помогло, прописывать css свойства в самом html файле через style="", так работает.. но сами понимаете, это не выход

Не могу понять в чем может быть дело. Прикрепляю вам YouTube-ссылку на демонстрацию проблемы.

UPD1:

У меня с деревом файлов довольно строго, в стилях всегда порядок, главный файл выглядит следующим образом:

@import url("main_styles.css");
@import url("header_and_logo.css");
@import url("crm.css");
@import url("donate.css");
@import url("footer.css");
@import url("green_forms.css");
@import url("404.css");
@import url("popup_loginform.css");
@import url("posts.css");
@import url("error_report_btn.css");
@import url("post_and_comments.css");
@import url("purchase.css");
@import url("fin-report.css");
@import url("user_page.css");
@import url("ee.css");
@import url("expenses.css");
@import url("welcome_page.css");
@import url("search.css");
@import url("settings.css");
@import url("conversations.css");
@import url("dialog.css");
@import url("fa_diagram.css");
@import url("forum.css");
@import url("fa.css");
@import url("empty.css");



/* ВСЕГДА ПОСЛЕДНЕЕ. */
@import url("new_media.css");

UPD2

Решение проблемы самое не очевидное!

После того, как я перепробовал все, что только можно было сделать со стилями, в главном css файле я отключил всё! И знаете, что я увидел когда обновил страницу? Верстку со стилями!!

Браузер! Мазафака браузер!! Я чистил кеш, затирал куки, обновлял страницу, но в "отладке кода" все стили продолжали быть подключенными! Перешел из firefox в chrome - все заработало!

Искренне надеюсь, что этот пост кому то еще будет полезен и сообщество программистов не закидает меня тухлыми яйцами)))

2 ответа 2

2

Посмотрите в сторону приоритетов по умолчанию в каскадных стилях.

Приоритеты стилей

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Возможно у вас есть более высокий приоритет на загрузке, а после вы меняете стили.

0

У меня с этим довольно строго, в стилях всегда порядок, главный файл выглядит следующим образом:

@import url("main_styles.css");
@import url("header_and_logo.css");
@import url("crm.css");
@import url("donate.css");
@import url("footer.css");
@import url("green_forms.css");
@import url("404.css");
@import url("popup_loginform.css");
@import url("posts.css");
@import url("error_report_btn.css");
@import url("post_and_comments.css");
@import url("purchase.css");
@import url("fin-report.css");
@import url("user_page.css");
@import url("ee.css");
@import url("expenses.css");
@import url("welcome_page.css");
@import url("search.css");
@import url("settings.css");
@import url("conversations.css");
@import url("dialog.css");
@import url("fa_diagram.css");
@import url("forum.css");
@import url("fa.css");
@import url("empty.css");



/* ВСЕГДА ПОСЛЕДНЕЕ. */
@import url("new_media.css");

Никогда не было проблем с отображением.

Я пробовал поочередно отключать все вызываемые файлы, проверял на конфликтующие !important'ы, но это не помогло..

4
  • 1
    перенесите этот ответ в вопрос. И побробуйте полностью отключить стили и отавить только ваши мануальные 10 авг 2020 в 10:18
  • Пробовал, не помогает! Знаете, что заметил? Теперь на той странице стили отображаются корректно, порадовался и перешел к редактированию другой страницы. Теперь на ней та же история. Я ничего не могу понять, что за глюк! 10 авг 2020 в 15:15
  • Может ли быть проблема в моем SublimeText3? Теоретически? где то же что то мешает! 10 авг 2020 в 15:21
  • Вы же понимаете что все крутится вокруг стилей. Ставьте точки останова смотрите что загрузилось что должно было быть какие дополнительные стили там есть ещё когда появляется когда нет 10 авг 2020 в 16:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.