新增CSS类样式不生效但原有CSS类正常显示该如何解决？

排查步骤 #

• 排查CSS语法错误：检查你新增的.water-bottle-pop规则之前的所有CSS代码是否存在语法问题，比如缺少闭合大括号}、属性后面漏写分号;，这类语法错误会导致后续的所有CSS规则失效，你可以直接复制style.css的内容到CSS校验工具中快速定位语法问题。
• 核对类名一致性：确认HTML中填写的water-bottle-pop和CSS里的选择器拼写完全一致，CSS类名区分大小写，同时注意有没有多打/漏写横杠、空格等多余字符。
• 用浏览器开发者工具验证规则加载情况：按F12打开开发者工具，切换到「元素」面板选中对应的div节点，查看右侧「样式」栏：
  • 如果看不到.water-bottle-pop的规则，说明浏览器没有加载到这条CSS定义，需要确认你修改的style.css就是当前页面实际引用的文件，检查文件路径是否正确、修改后的文件是否已经上传到服务器或部署到对应的运行目录，避免出现本地修改的是备份文件、实际引用的文件未更新的情况。
  • 如果能看到.water-bottle-pop的规则但是属性被划掉了，说明优先级冲突被其他规则覆盖，你可以查看是哪条优先级更高的规则（比如ID选择器、更复杂的组合选择器、带!important的属性）覆盖了你的样式，调整选择器权重即可解决。
• 排查媒体查询范围：确认你写的.water-bottle-pop规则是否写在某个@media媒体查询块内，如果当前页面的视口尺寸不满足该媒体查询的触发条件，规则就不会生效。
• 检查内联样式覆盖：查看div标签上是否直接写了style属性，内联样式的优先级高于类选择器，会覆盖类定义的样式。
• 确认CSS加载顺序：如果页面还引用了其他CSS文件，排查是否有其他文件在style.css之后加载，且里面存在同名的.water-bottle-pop规则覆盖了你的定义。
• 预处理器编译校验：如果你使用了Sass、Less等CSS预处理器，确认修改后的代码已经完成编译，最终打包输出的CSS文件里已经包含了.water-bottle-pop的规则。

内容的提问来源于stack exchange，提问作者John Stewart