Мой CSS не применяется при изменении страницы, если я ее не обновлю

#javascript #css #vue.js

Вопрос:

Я внес изменения в свой CSS, но эти изменения не применяются, когда я захожу на страницу. Они появляются только тогда, когда я обновляю страницу.

Вот CSS, о котором я говорю:

 #progress-bar{
    position: absolute;
    top:12%;
    right:50%;
    transform: translate(50%);
    font-size: 25px;
}
 

И когда я переключаю инструменты разработчика, я вижу это:

введите описание изображения здесь

Это единственный элемент, который не работает.


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

И это часть HTML, которая используется для определения панели выполнения:

 <v-col id="progress-bar" cols="7">  
                <v-progress-linear  color="lightblue" height="10" value="25" width="700" rounded></v-progress-linear>
</v-col>
 

Комментарии:

1. Ожидается ли все это дублирование CSS? Является ли один из CSS-блоков на вашем скриншоте правильным? Что такое HTML и какую систему сборки или генератор вы используете? Добавьте еще немного информации, и мы сможем лучше помочь.

2. 5-й-это тот, который следует применять. Я использую vuetify для загрузки дизайнов

3. попробуйте добавить новый класс с этими стилями, что-то вроде . индикатор выполнения{…} и используйте этот класс в этом элементе.

4. Я изменил идентификатор элемента в HTML и CSS, и это решило проблему