CSS не отображается при добавлении нового класса CSS, но отображается старый класс CSS

#php #css #wordpress

#php #CSS #wordpress

Вопрос:

Поэтому я пытался добавить новый класс css к определенной функции на веб-сайте. Для этой функции она уже подключена к уже созданному классу CSS в файле style.css, имея имя класса css внутри div функции. Однако, когда я иду, чтобы создать новый класс css и добавить его в style.css/заменив имя класса в div функции, он не отображается на веб-сайте. Однако, когда я использую старый класс, к которому также была подключена функция, и ввожу это имя в div функции, отображается старый css. Я очистил весь свой кэш и обновил медиа-запрос. Я также перезагрузил свой компьютер, но безуспешно. Мне было интересно, как подойти к этому вопросу и есть ли у кого-нибудь какие-либо рекомендации?

Спасибо!

Вот как выглядит мой код прямо сейчас и который отображается на сайте:

 lt;div class="water-bottle water-square"gt;.....lt;/divgt;  

CSS

 .water-bottle {  width: calc(50% - 15px);  min-height: 15.5em;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  font-size: 20px;  color: #fff;  padding-left: 50px;  padding-right: 50px;  padding-top: 40px;  padding-bottom: 40px;   border-radius: 16px;  position: relative; }   

Это то, что я тоже изменяю, и оно не отображается:

 lt;div class="water-bottle-pop water-square"gt;.....lt;/divgt;   

CSS

 .water-bottle-pop {  width: calc(50% - 15px);  min-height: 1.5em;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  font-size: 20px;  color: #fff;  padding-left: 20px;  padding-right: 20px;  padding-top: 10px;  padding-bottom: 40px;   border-radius: 16px;  position: relative; }   

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

1. Откройте инструменты разработки, перейдите в его настройки и убедитесь, что установлен флажок «отключить кэш HTTP, когда инструменты разработки открыты» (или с аналогичным именем). Затем перезагрузите, сохраняя инструменты разработки открытыми (которые в любом случае всегда должны быть открыты во время работы разработчика =)

2. Привет, на ваш вопрос трудно ответить без контекста, не могли бы вы опубликовать здесь какой-нибудь код, пожалуйста? Либо вам нужно удалить кэш, либо у вас отсутствует файл css, либо ваши классы в этом файле неправильно отформатированы.

3. Мое лучшее предположение: проблема с кэшированием. Попробуйте нажать CTRL F5 после изменения CSS.

4. Привет, @Майк, я попробовал твой метод проверки флажка, и это, к сожалению, не сработало

5. @JohnStewart Правильно посмотрите на имена классов в CSS и Html

Ответ №1:

 Both are working well, if you want, you can try running both together.  
 /*.water-bottle {  width: calc(50% - 15px);  min-height: 15.5em;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  font-size: 20px;  color: #fff;  padding-left: 50px;  padding-right: 50px;  padding-top: 40px;  padding-bottom: 40px;   border-radius: 16px;  position: relative;  border:2px solid red; }*/ .water-bottle-pop {  width: calc(50% - 15px);  min-height: 1.5em;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  font-size: 20px;  color: #fff;  padding-left: 20px;  padding-right: 20px;  padding-top: 10px;  padding-bottom: 40px;   border-radius: 16px;  position: relative;  border:2px solid black; } 
 lt;!--lt;div class="water-bottle water-square"gt;.....lt;/divgt;--gt; lt;div class="water-bottle-pop water-square"gt;.....lt;/divgt;