Один и тот же CSS в разных файлах заставляет страницу загружаться по-разному

Question

У меня есть файл с именем global.css, и я переместил туда несколько CSS-файлов, поскольку я использовал их на нескольких страницах, затем я удалил CSS-файл из таблицы стилей, характерной для конкретной страницы, и стилизация страницы была нарушена. Если я верну CSS обратно, я снова получу тот же стиль.

Вот код:

.thumb {
background-position: center;
background-size: cover;
width:  24.66666666vw;
height: 24.66666666vw;
max-width: 500px;
max-height: 500px;
margin: 1vw;
}

.photoGrid {
    width: 80vw;
    height: auto;
    margin: 1vw 0 1vw 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
}

P.S. photoGrid - это div, внутри которого есть несколько div-ов большого пальца.

P.P.S. Я думаю, что это потому, что я назвал flex box столбцом позже, но он должен был быть для другого медиа-запроса, теперь это нормально. Спасибо

Answer 1

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

Answer 2

Если бы мне пришлось угадывать, я бы сказал, что проблема заключается в порядке загрузки DOM и его элементов. Вероятно, у вас есть другие стили, взятые из других стилей. Инструмент Chrome для инспекторов поможет вам увидеть, какие стили загружаются первыми и имеют приоритет.