将img标签display内联样式移入CSS类后logo不再响应式如何解决

问题成因 #

核心原因是CSS优先级差异：
之前用内联样式写display:block时，内联样式的优先级远高于普通类选择器、标签选择器的规则，哪怕项目中存在其他针对小屏幕、试图修改该元素display属性的CSS规则，都会被内联样式覆盖，display:block始终生效。
当你把display:block挪到普通的.project-logo类里后，类选择器的优先级更低，如果项目中存在其他权重更高（比如组合选择器、带媒体查询的同权重但后加载的规则）的CSS，比如在小屏幕断点下给该元素（或全局img、该位置的img）设置了display:none，就会覆盖掉类里的display:block，导致元素直接隐藏，看起来像是消失了。

解决方案 #

• 先排查冲突规则：打开浏览器开发者工具（F12），选中该logo元素，在「样式」面板查看display属性的生效来源，确认是哪条规则在小屏幕下覆盖了.project-logo的设置，优先删除或调整那条冲突规则，这是最合理的解法。
• 提高.project-logo的选择器权重：如果不方便修改冲突规则，可以给类选择器增加权重，比如改成带标签名的选择器，权重高于普通类选择器，大概率可以覆盖普通的冲突规则：

img.project-logo {
   display: block;
   max-width: 100%;
   height: auto;
}

如果仍然被覆盖，仅在必要时添加!important（不推荐常规使用，会破坏整体优先级逻辑）：

.project-logo {
   display: block !important;
   max-width: 100%;
   height: auto;
}

• 检查CSS加载顺序：确保.project-logo所在的CSS文件，晚于其他可能冲突的CSS文件加载，同权重规则下后加载的会优先生效。

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