添加新的 CSS 类时 CSS 不显示，但显示旧的 CSS 类答案

【问题标题】：CSS is not showing up when new CSS class is added, but old CSS class is showing up添加新的 CSS 类时 CSS 不显示，但显示旧的 CSS 类
【发布时间】：2022-01-06 14:59:33
【问题描述】：

所以我一直在尝试为网站上的特定功能添加一个新的 css 类。对于这个特性，它已经通过在特性的 div 中包含 css 类名连接到 style.css 中已经创建的 CSS 类。但是，当我去创建一个新的 css 类并将其添加到 style.css/replaceing the classname in div 的功能时，它不会显示在网站上。但是，当我使用该功能也已连接的旧类并将该名称输入到该功能的 div 中时，旧的 css 就会出现。我清除了所有缓存并更新了媒体查询。我也重新启动了我的电脑，但没有运气。我想知道如何解决这个问题，是否有人有任何建议？

谢谢！

这是我的代码现在的样子，并且在网站上显示：

<div class="water-bottle water-square">.....</div>

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;
}

这也是我改的，也没有显示出来：

<div class="water-bottle-pop water-square">.....</div>

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;
}

【问题讨论】：

打开您的开发工具，进入其设置，并确保选中“开发工具打开时禁用 HTTP 缓存”（或类似名称）复选框。然后在保持开发工具打开的同时重新加载（无论如何在开发工作期间应该始终打开=）
您好，您的问题在没有上下文的情况下很难回答，您可以在这里发布一些代码吗？要么你需要破坏你的缓存，要么你有一个缺少的 css 文件，要么你的文件中的类格式不正确。
我的最佳猜测：缓存问题。更改 CSS 后尝试 CTRL+F5。
嘿，@Mike，我试过你的方法来检查框，但遗憾的是没有用
@JohnStewart 在 CSS 和 Html 中正确查看类名

标签： php css wordpress

【解决方案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;
}

<!--<div class="water-bottle water-square">.....</div>-->
<div class="water-bottle-pop water-square">.....</div>

【讨论】：